前端css框架SASS使用教程,Sass用法指南

Sass用法指南

2015/09/06 · CSS · Sass

最先的小说出处: 吴广磊的博客   

写在前段时间的话:趁着CSS文件更大,内容愈发复杂,对其进展很好的保养将变的十分不便。这时候CSS预管理器就可以预知帮上海南大学学忙了,它们往往具有变量、嵌套、承袭等重重CSS不具备的特征。有好些个CSS预管理器,这里总括Sass的利用办法。

======正文开首======

笔者们能够透过风度翩翩体系似css的编制程序语言编写代码,保存为.scss后缀名的文件,然后接纳Sass实行拍卖为css文件,而这种.scss文件中得以有变量、嵌套等成效,有个别编制程序的味道,Sass简要介绍看这里:Sass;同一时间.scss文件也能够由此Sass处理为减少的、缩进的等差异风格的css代码,方便中期的布局。上面是自身的部分就学总括。

大器晚成、情形布置

1.安装rubby:

  Sass是用ruby写的,须要ruby的运作意况,从以下链接下载rubyinstaller进行设置(windows):

2.安装Sass

设置达成ruby后,接下去安装Sass。由于本国ruby源现在被墙,通过下边情势开展安装SASS,打开cmd命令行。

(1)移除原有的ruby源地址

gem sources –remove 

(2)新添可用的ruby源地址

gem sources -a https://ruby.taobao.org

(3) 安装Sass

gem install sass

(4)sublime协理scss文件高亮显示

借助package control安装sass插件,之后set syntax为sass即可。

图片 1

(5)制止Sass汉语注释乱码

承袭写.scss代码进程中普通话注释会有乱码的情况,找到engine.rb文件(平日位于Ruby22librubygems2.2.0gemssass-3.4.18libsass目录下边),在富有的require后边新扩张如下代码:

Encoding.default_external = Encoding.find(‘utf-8’)

图片 2

至此,Sass遇到布置形成。

二、编译.scss文件为css文件

  小结具体Sass语法格式在此以前,先说一下哪些编写翻译.scss文件为css文件。

1.切换成.scss文件所在目录

指令行下切换成代码文件夹目录(如Z:),假诺有文件test.scss文件,里面内容如下:(SASS完全支持css语法)

CSS

h1{ font-size:17px; } h2{ font-size:18px; }

1
2
3
4
5
6
h1{
    font-size:17px;    
}
h2{
    font-size:18px;
}

 

2.编译scss文件为css文件

运作命令:sass –style compressed test.scss test.css,就能够生成压缩版的css文件,何况命名称为test.css。几点表明:

(1)–style 前面可以有多少个参数可选,分别为expanded、nested、compact、compressed,分别选拔差异参数的职能能够友善尝尝体验。

(2)test.scss和test.css文件目录能够自定义,比方把Z盘sass目录下的test.scss文件编写翻译为压缩版的文本,并放置在Z盘css目录下,那么命令即:sass –style compressed z:sasstest.scss z:csstest.css

(3)开采进程中,只必要纠正scss文件,然后编写翻译;前端页面只须要引用相应的css文件就能够。

3.侦听文件和文件夹

  借使指望某贰个scss文件可能相应的文件夹上边文件改革后,自动举办编写翻译,那么能够应用侦服从令。

(1)侦听文件:

sass –watch –style compressed test.scss:test.css

当test.scss文件有涂改后,会自行编写翻译为test.css,而且是compressed的。

(2)侦听文件夹:

sass –watch –style compressed sass:css

当sass文件夹下.scss文件有纠正的时候,会活动编写翻译为与sass汉语件同名的css文件。

备注:

(1)注意源文件和目的文件之间是冒号,与编写翻译命令中为空格不相同。

(2)生成的map文件能够搜寻source map文件的功效。

三、Sass基本用法

下面前境遇Sass基本的用法进行计算,SASS语法与CSS具备超高的相像度。

以下演示源代码放在test.scss文件中,编译后生成的css文件放在test.css文件中,侦服从令为:

sass –watch –style expanded sass/test.scss:css/test.css

1.变量:以$开头。

源代码:

Sass

$color1:#aeaeae; .div1{ background-color:$color1; }

1
2
3
4
$color1:#aeaeae;
.div1{
    background-color:$color1;
}

编译后:

CSS

.div1 { background-color: #aeaeae; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  background-color: #aeaeae;
}
 
/*# sourceMappingURL=test.css.map */

2.变量嵌套在字符串之中:应该以#{}包裹。

源代码:

Sass

$left:left; .div1{ border-#{$left}-width:5px; }

1
2
3
4
$left:left;
.div1{
    border-#{$left}-width:5px;
}

编译后:

CSS

.div1 { border-left-width: 5px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  border-left-width: 5px;
}
 
/*# sourceMappingURL=test.css.map */

3.同意开展测算:

源代码:

Sass

$left:20px; .div1{ margin-left:$left 12px; }

1
2
3
4
$left:20px;
.div1{
    margin-left:$left 12px;
}

编译后:

CSS

.div1 { margin-left: 32px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  margin-left: 32px;
}
 
/*# sourceMappingURL=test.css.map */

4.同意选择器嵌套:

源代码:

Sass

.div1{ .span1{ height: 12px; } .div2{ width: 16px; } }

1
2
3
4
5
6
7
8
.div1{
    .span1{
        height: 12px;
    }
    .div2{
        width: 16px;
    }
}

编译后:

Sass

.div1 .span1 { height: 12px; } .div1 .div2 { width: 16px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
.div1 .span1 {
  height: 12px;
}
.div1 .div2 {
  width: 16px;
}
 
/*# sourceMappingURL=test.css.map */

5.施用&引用父成分

源代码:

Sass

.div1{ &:hover{ cursor: hand; } }

1
2
3
4
5
.div1{
    &:hover{
        cursor: hand;
    }
}

编译后:

CSS

.div1:hover { cursor: hand; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1:hover {
  cursor: hand;
}
 
/*# sourceMappingURL=test.css.map */

6.注释:

有二种情势:

(1)//comment:该注释只是在.scss源文件中有,编写翻译后的css文件中没有。

(2)/*! */:主要注释,任何style的css文件中都会有,日常放置css文件版权表达等消息。

(3)/* */:该注释在compressed的style的css中从未,别的style的css文件都会富含。

备考:通常(1)(2)使用的多些

7.同意承袭:@extend 类名

源代码:

Sass

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }

1
2
3
4
5
6
7
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
/*# sourceMappingURL=test.css.map */

稳重:借使在class2前边有设置了class1的品质,那么也会耳濡目染class2,如下:

源代码:

CSS

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; } .class1{ font-weight:bold; }

1
2
3
4
5
6
7
8
9
10
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}
.class1{
    font-weight:bold;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } .class1, .class2 { font-weight: bold; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
.class1, .class2 {
  font-weight: bold;
}
 
/*# sourceMappingURL=test.css.map */

可知sass不是单遍编写翻译。

8.引用外界css文件(Partials)

突发性网页的不等部分会分成七个文件来写样式,可能援引通用的一些样式,那么能够使用@import。

源代码:

Sass

@import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss";

1
2
3
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

编译后:

CSS

h1 { font-size: 17px; } h2 { font-size: 17px; } h3 { font-size: 17px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}
 
/*# sourceMappingURL=test.css.map */

其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。平日情况下,复用的文件名倘若以下划线_早先的话,Sass会感觉该文件是一个partial file,不会将其编写翻译为css文件,首要功效是要透过import援用。

9.mixin和include:

mixin相近于C语音的宏,存款和储蓄通用模块,通过@include援引。

源代码:

Sass

@mixin common{ display:block; margin:0 auto; } .class1{ font-size:16px; @include common; }

1
2
3
4
5
6
7
8
@mixin common{
    display:block;
    margin:0 auto;
}
.class1{
    font-size:16px;
    @include common;
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin: 0 auto; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
.class1 {
  font-size: 16px;
  display: block;
  margin: 0 auto;
}
 
/*# sourceMappingURL=test.css.map */

还是可以更加灵敏,像函数雷同,如下:

源代码:

Sass

@mixin common($value1,$value2,$defaultValue:12px){ display:block; margin-left:$value1; margin-right:$value2; padding:$defaultValue; } .class1{ font-size:16px; @include common(12px,13px,15px); } .class2{ font-size:16px; @include common(12px,13px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin common($value1,$value2,$defaultValue:12px){
    display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$defaultValue;
}
.class1{
    font-size:16px;
    @include common(12px,13px,15px);
}
.class2{
    font-size:16px;
    @include common(12px,13px);
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin-left: 12px; margin-right: 13px; padding: 15px; } .class2 { font-size: 16px; display: block; margin-left: 12px; margin-right: 13px; padding: 12px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.class1 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 15px;
}
 
.class2 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 12px;
}
 
/*# sourceMappingURL=test.css.map */

末尾,bootstrap第四版发表了下载,并且从less转移到了sass,能够下载里面看看它此中的scss代码,体会一下,可能你会发觉更多风趣的用法。

(完)

 

1 赞 2 收藏 评论

图片 3

安装ruby

一、什么是SASS

 

SASS是风姿浪漫种CSS的开垦工具,提供了非常多低价的写法,大大节约了设计者的光阴,使得CSS的花费,变得轻便和可敬爱。

本文化总同盟结了SASS的严重性用法。作者的对象是,有了这篇随笔,日常的貌似选用就无需去看法定文档了。

配置sass环境

http://rubyinstaller.org/downloads/

 

1.安装ruby。
2.win键 Sportage 打开菜单运营键。
gem source -a http://rubygems.org
gem source -a http://rubygems.org
gem install sass
4.在命令行输入
sass -v
//看sass是或不是安装成功
5.返回去webStrom依次点击
webstorm-File-settings-Tools-FileWatchers

天猫商城镜像

二、安装和选拔

 

2.1 安装

SASS是Ruby语言写的,但是两岸的语法未有提到。不懂Ruby,照样使用。只是必得先安装Ruby,然后再设置SASS。

如若你已经安装好了Ruby,接着在命令行输入上边的授命:

  gem install sass

接下来,就可以运用了。

2.2 使用

SASS文件就是平凡的公文文件,里面能够直接接受CSS语法。文件后缀名是.scss,意思为Sassy CSS。

下边包车型地铁命令,能够在显示屏上突显.scss文件转载的css代码。(固然文件名字为test。)

  sass test.scss

假如要将呈现结果保存成文件,前面再跟一个.css文件名。

  sass test.scss test.css

SASS提供八个编译风格的选项:

  * nested:嵌套缩进的css代码,它是暗中同意值。

  * expanded:未有缩进的、扩展的css代码。

  * compact:简洁格式的css代码。

  * compressed:压缩后的css代码。

生产情状在那之中,平日选用最终二个抉择。

  sass --style compressed test.sass test.css

你也足以让SASS监听有些文件或目录,意气风发旦源文件有更动,就自动生成编写翻译后的版本。

  // watch a file

  sass --watch input.scss:output.css

  // watch a directory

  sass --watch app/sass:public/stylesheets

SASS的官网,提供了二个在线转换器。你能够在此边,试运作上面的种种例子。

 

  1. 点击右上角+号 创造 SCSS 。在program选中ruby下的binscss.bat文本,然后点击OK。
    (点击右上角+号 创造 CSS 。在program选中ruby下的bincss.bat文件,然后点击OK。)

https://gems.ruby-china.org/

三、基本用法

 

3.1 变量

SASS允许行使变量,全部变量以$起头。

  $blue : #1875e7; 

  div {
   color : $blue;
  }

如若变量要求镶嵌在字符串之中,就务须须求写在#{}之中。

  $side : left;

  .rounded {
    border-#{$side}-radius: 5px;
  }

3.2 总括作用

SASS允许在代码中选取算式:

  body {
    margin: (14px/2);
    top: 50px 100px;
    right: $var * 10%;
  }

3.3 嵌套

SASS允许选拔器嵌套。比方,上边包车型地铁CSS代码:

  div h1 {
    color : red;
  }

能够写成:

  div {
    hi {
      color:red;
    }
  }

性情也得以嵌套,举例border-color属性,能够写成:

  p {
    border: {
      color: red;
    }
  }

介意,border前面总得抬高冒号。

在嵌套的代码块内,能够行使&援用父成分。比方a:hover伪类,可以写成:

  a {
    &:hover { color: #ffb3ff; }
  }

3.4 注释

SASS共有二种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编写翻译后被略去。

在/*末端加叁个惊叹号,表示那是"首要注释"。固然是减少情势编译,也会保留那行注释,平时可以用来注脚版权新闻。

  /*! 
    主要注释!
  */

sass语法

转换镜像:( 如报错,请把

四、代码的重用

 

4.1 继承

SASS允许一个接受器,传承另二个采纳器。举个例子,现成class1:

  .class1 {
    border: 1px solid #ddd;
  }

class2要承接class1,就要动用@extend命令:

  .class2 {
    @extend .class1;
    font-size:120%;
  }

4.2 Mixin

Mixin有一点点像C语言的宏(macro),是足以引用的代码块。

使用@mixin命令,定义三个代码块。

  @mixin left {
    float: left;
    margin-left: 10px;
  }

接收@include命令,调用这几个mixin。

  div {
    @include left;
  }

mixin的强有力的地方,在于能够内定参数和缺省值。

  @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

应用的时候,依据需求参加参数:

  div {
    @include left(20px);
  }

下边是二个mixin的实例,用来变化浏览器前缀。

  @mixin rounded($vert, $horz, $radius: 10px) {
style="font-size: 16px;">    border-#{$vert}-#{$horz}-radius: $radius;
style="font-size: 16px;">    -moz-border-radius-#{$vert}#{$horz}: $radius;
style="font-size: 16px;">    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

选用的时候,能够像上边那样调用:

  #navbar li { @include rounded(top, left); }

  #footer { @include rounded(top, left, 5px); }

4.3 颜色函数

SASS提供了部分内置的颜料函数,以便生成连串颜色。

  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

4.4 插入文件

@import命令,用来插入外界文件。

  @import "path/filename.scss";

设若插入的是.css文件,则未有差距于css的import命令。

  @import "foo.css";

  • 1.变量
    $bg:pink;
    .header{background:$bg};
    $place:top;
    疏解:假若变量要求镶嵌在字符串之中,就一定要供给卸载#{}之中。
    .header{margin-#{$space}:20px;}
  • 2.测算效率
    body{margin:(14px/2);
    top:50px 100px; 加号两侧加空格
    right:$var * 一成; 加号两边加空格
    }
  • 3.嵌套
    div h{color:red;}
    可以改写为
    div{ hi{color:red;} }

$gem update --system # 这里请翻墙一下$gem -v2.6.3

五、高端用法

 

5.1 条件语句

@if能够用来判定:

  p {
    @if 1 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
  }

配套的还会有@else命令:

  @if lightness($color) > 30% {
    
  } @else {
    background-color: #fff;
  }

5.2 循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;

  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似:

  @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

5.3 自定义函数

SASS允许客商编写自个儿的函数。

  @function double($n) {
    @return $n * 2;
  }

  #sidebar {
    width: double(5px);
  }

原稿地址:

代码重用

$gem sources --add  --remove 

  • 1.继承
    //sass允许叁个选取器,承继另叁个接收器。比方,现存class1:
    .class1{ border:1px solid #ddd; }
    .class2{@extend .class1;
    font-size:120%}

  • 2.Mixin
    //是足以选取代码块
    @mixin left{ float;left;
    margin-left:10px }
    div{ @include left; }
    //mixin强盛的地方,在于可以钦定参数和缺省值。
    @mixin left($value:10px){
    float:left;
    margin-right:$value; }
    div{ @include left(20px); }
    //能够传递四个参数
    @mixin wh($w:100px,$h100px){
    width:$w;
    height:$h; }
    div{ @include wh(200px,200px); }

  • 3. 安顿文件
    @import命令,用来插入外界文件
    @import"path/filename.scss";
    倘若插入的是.css文件,则等同css的import命令。
    @import"foo.css"

$gem sources -l

# 确认保障唯有 gems.ruby-china.org

步骤:

step1

新建.scss文件,根据sass语法编写

step2

打开ruby 命令

进去各羊眼半夏件夹

如在F盘,可径直输入F: 回车

如f://study/exercise/test.scss

则输入 cd f:/study/exercise 回车

SASS文件正是平淡无奇的文本文件,里面能够从来动用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

下边包车型大巴吩咐,能够在显示器上展现.scss文件转载的css代码。(假使文件名字为test。)

sass test.scss

举例要将呈现结果保存成文件,前边再跟一个.css文件名。

sass test.scss test.css

SASS提供四个编译风格的选项:

* nested:嵌套缩进的css代码,它是暗许值。

* expanded:未有缩进的、扩充的css代码。

* compact:简洁格式的css代码。

* compressed:压缩后的css代码。

生育情状在这之中,经常选拔最终八个精选。

sass --style compressed test.sass test.css

你也得以让SASS监听有个别文件或目录,后生可畏旦源文本有变动,就自动生成编译后的版本。

// watch a file

sass --watch input.scss:output.css

// watch a directory

sass --watch app/sass:public/stylesheets

三、基本用法

3.1 变量

SASS允许选用变量,全数变量以$以前。

$blue : #1875e7;

div {

color : $blue;

}

假定变量须求镶嵌在字符串之中,就必需要求写在#{}之中。

$side : left;

.rounded {

border-#{$side}-radius: 5px;

}

3.2 总括功用

SASS允许在代码中运用算式:

body {

margin: (14px/2);

top: 50px 100px;

right: $var * 10%;

}

3.3 嵌套

SASS允许选取器嵌套。比方,上面的CSS代码:

div h1 {

color : red;

}

能够写成:

div {

h1 {

color:red;

}

}

本性也能够嵌套,举例border-color属性,能够写成:

p {

border: {

color: red;

}

}

专心,border前边总得抬高冒号。

在嵌套的代码块内,能够利用&援引父成分。举例a:hover伪类,能够写成:

a {

&:hover { color: #ffb3ff; }

}

3.4 注释

SASS共有二种注释风格。

标准的CSS注释 /* comment */ ,会保留到编写翻译后的文件。

单行注释 // comment,只保留在SASS源文件中,编写翻译后被略去。

在/*末尾加一个惊讶号,表示那是"首要注释"。纵然是减掉形式编译,也会保留那行注释,常常能够用于证明版权音信。

/*!

驷不及舌注释!

*/

四、代码的重用

4.1 继承

SASS允许二个选拔器,承袭另三个接收器。比方,现成class1:

.class1 {

border: 1px solid #ddd;

}

class2要承袭class1,就要选拔@extend命令:

.class2 {

@extend .class1;

font-size:120%;

}

4.2 Mixin

Mixin有一点点像C语言的宏(macro),是能够引用的代码块。

利用@mixin命令,定义贰个代码块。

@mixin left {

float: left;

margin-left: 10px;

}

动用@include命令,调用这一个mixin。

div {

@include left;

}

mixin的有力之处,在于能够内定参数和缺省值。

@mixin left($value: 10px) {

float: left;

margin-right: $value;

}

动用的时候,依照必要投入参数:

div {

@include left(20px);

}

下边是二个mixin的实例,用来变化浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {

border-#{$vert}-#{$horz}-radius: $radius;

-moz-border-radius-#{$vert}#{$horz}: $radius;

-webkit-border-#{$vert}-#{$horz}-radius: $radius;

}

运用的时候,能够像上边那样调用:

#navbar li { @include rounded(top, left); }

#footer { @include rounded(top, left, 5px); }

4.3 颜色函数

SASS提供了一些停放的颜料函数,以便生成种类颜色。

lighten(#cc3, 10%) // #d6d65c

darken(#cc3, 10%) // #a3a329

grayscale(#cc3) // #808080

complement(#cc3) // #33c

4.4 插入文件

@import命令,用来插入外界文件。

@import "path/filename.scss";

假诺插入的是.css文件,则如出大器晚成辙css的import命令。

@import "foo.css";

五、高端用法

5.1 条件语句

@if可以用来判定:

p {

@if 1 1 == 2 { border: 1px solid; }

@if 5 < 3 { border: 2px dotted; }

}

配套的还会有@else命令:

@if lightness($color) > 30% {

background-color: #000;

} @else {

background-color: #fff;

}

5.2 循环语句

SASS支持for循环:

@for $i from 1 to 10 {

.border-#{$i} {

border: #{$i}px solid blue;

}

}

也支持while循环:

$i: 6;

@while $i > 0 {

.item-#{$i} { width: 2em * $i; }

$i: $i - 2;

}

each命令,作用与for类似:

@each $member in a, b, c, d {

.#{$member} {

background-image: url("/image/#{$member}.jpg");

}

}

5.3 自定义函数

SASS允许客户编写本人的函数。

@function double($n) {

@return $n * 2;

}

#sidebar {

width: double(5px);

}

本文由星彩网app下载发布于前端技术,转载请注明出处:前端css框架SASS使用教程,Sass用法指南

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。