sass使用笔记_html/css_WEB-ITnose

sass（Syntactically Awesome Style Sheets）是一个css预处理器，提供了许多便利的写法。sass坚持了DRY（don`t repeat yourself）的原则，它可以提高css的开发效率，并使css更利于维护。

1、安装

安装gulp-sass插件安装命令如下

npm install gulp-sass --save-dev

2、使用

sass有两种后缀文件名.sass和.scss

使用.sass的时候不能使用大括号，使用回车和至少两个空格来区分选择器和规则

示例：

p    color:#f00;b    background:#ddd;

使用.scss时，基本和平时写css差不多，使用大括号来区分选择器和规则。正因为scss可以兼容css,更符合我们平常的书写习惯，所以一般我们都采用scss为后缀名。

示例：

p{    color:#f00;}b{    background:#ddd;}

gulp-sass的使用

var gulp = require('gulp');var gulp-sass = require('gulp-sass');gulp.task('sass',function(){    gulp.src('./sass/**/*.scss')    .pipe(sass(outputStyle:'compressed'))    .pipe(gulp.dest('./css'));});

以上为gulp-sass的基本用法，即引用gulp和gulp-sass插件，然后读取scss文件进行编译，输出格式为compressed，并将编译成功的css文件输出到css文件夹。

欲了解更多关于gulp-sass插件的用法，请点击这里跳转

3、基本用法

3.1 变量

所有变量以$开头,sass使用冒号(:)来定义一个变量。

$blue:#1875e7;div{    color:$blue;}

以上代码将被编译成

div{color:#1875e7;}

如果变量需要嵌在字符串中，就必须写在#{}中

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

以上代码将被编译成

div{border-left-radius:5px;}

3.2计算功能

sass允许在代码中使用算式。sass中的算术操作符有：

• 加(+)
• 减(-)
• 乘(*)
• 除(/)
• 取余(%)

注意上面的操作符只能用于单位相同的数值运算。

h2{    font-size:5px+2em;//错误！！！编译报错    font-size:5px+2;//7px}

此外，两个相同单位的数值相乘无法生成有效的css

h2{font-size:5px*2px;}//invalid css

/操作符本身就是css简写语法的一部分如：font:16px/24px Arial;但是sass重载了这个运算符，用于执行除法操作，下面让我们看它是如何解析的：

h2{     //不执行除法操作，原样输出    font-size:16px/24px;    //使用差值语法之后，原样输出    font-size:#{$base-size}/#{$line-height};    //使用括号包裹之后，执行除法操作    font-size:(16px/24px);    //使用变量，执行除法操作    font-size:$base-size/$line-height;    //调用函数，执行除法操作    opacity:random(4)/5;    //使用算术操作符，执行除法操作    padding-right:2px/4px+3px;}

操作符的优先级：

• 括号优先级最高
• 乘法，除法优先于加法，减法

写一个简单的计算示例：

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

以上代码将被编译成

body{margin:7px;top:150px;right:20%;}

3.3嵌套

就是我写代码是最最常用的用法ps:属性也可以嵌套，比如：

p{    border:{        color:red;    }}

注意：border后面必须加上冒号

3.4注释

sass中有两种注释

//......(编译后被省略)/*......*/（保留到编译后）

4、代码的重用

4、1继承

sass允许一个选择器继承另一个选择器

.class1{}.class2{    @extend .class1;    .......}

4.2 Mixin

Mixin有点像C语言的宏，是可以重用的代码块使用@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);}

4.3 颜色函数

sass提供了一些内置的颜色函数，以便生成系列颜色

lighten(#ccc,10%);darken(#ccc,10%);grayscale(#ccc);complement(#ccc);

4.4插入文件

@import命令，插入外部文件@import "......";@import可以导入css文件，也可以导入sass文件导入css文件，仍是以@import存在，这种方式在css中是不推荐使用的，因为，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。导入sass文件的时候，在编译的时候实际是把两个sass文件合并，编译成一个css文件。

5、高级用法

5、1条件语句

@if...@else....

@mixin txt($weight){    @if $weight == bold {font-weight:bold;}    @else if $weight == light {font-weight:100;}    @else if $weight == heavy {font-weight:900;}    @else {font-size:normal;}}.txt1{    @include txt(bold);  }.txt2{    @include txt(light);  }.txt3{    @include txt(heavy);  }

以上代码将被编译成：

.txt1{font-weight:blod;}.txt2{font-weight:100;}.txt3{font-weight:900;}

5、2循环语句

@for@for有两种使用方式:from start to end，遍历范围[start,end-1]from start through end，遍历范围[start,end]

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

这段sass代码会被编译成

.border-1{border:1px solid blue;}.border-2{border:2px solid blue;}.border-3{border:3px solid blue;}.border-4{border:4px solid blue;}.border-5{border:5px solid blue;}.border-6{border:6px solid blue;}.border-7{border:7px solid blue;}.border-8{border:8px solid blue;}.border-9{border:9px solid blue;}

@while

 $i:1; @while $i<5{    .item-#{$i}{width:2em*$i;}    $i:$i+1;}

以上代码将被编译成

.item-1 {width: 2em; }.item-2 {width: 4em; }.item-3 {width: 6em; }.item-4 {width: 8em; }

@each@each指令同样可以用于循环输出，和@for的区别在于，@each是通过遍历list或者map实现循环输出的。

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

以上代码将被编译成

.a{background-image:url("/image/a.jpg");}.b{background-image:url("/image/b.jpg");}.c{background-image:url("/image/c.jpg");}.d{background-image:url("/image/d.jpg");}

5、3自定义函数

sass允许用户自定义函数

@function double($n){    @return $n*2;}div{    width:double(5px);}

以上代码将被编译成

div{width:10px}

在我们的项目中经常会被用来计算百分比，或者根据html元素的font-size大小来计算rem比如

@function to_rem($px){    @return $px/50 + rem;}.a{width:to_rem(30);}

以上代码将被编译成：

.a{width:0.6rem}

本文整理自网络及《sass与compass实战》，之后将继续完善更新。参考文章:Sass的表达式和控制命令