博客 技术博客 css

Sass初学

Sass作为css预处理器的一种，极大方便了我们编写css代码。与Less相比较，我个人更加喜欢使用Sass，因为它的代码风格更加接近高级程序设计语言。
Sass上手并不难，可以参考官方文档学习。

安装Sass

1.安装ruby

Sass依赖于ruby，可以点击这里安装，在安装过程中勾选Add Ruby executables to your PATH。

2.安装Sass

安装好ruby后，打开Start Command Prompt with Ruby，输入下面命令来进行安装。

1
gem install sass

可以通过

1
sass -v

来查看版本，这也正说明了Sass已经安装成功了。

编译Sass

1.命令行编译

单文件一次性编译

1
sass style.scss style.css

单文件监听

1
sass --watch style.scss:style.css

2.Koala

在Less初学篇里已经介绍过，Koala同样可以编译Sass文件，但是这里需要注意，ruby环境默认是不支持中文编码的，因此需要将Koala文件夹中的\rubygems\gems\sass-版本\lib\sass里面的engine.rb添加一行代码Encoding.default_external = Encoding.find(‘utf-8’)(放在所有require xxx后面即可)。

3.使用sublime的插件或者webstorm

sublime支持安装编译Sass文件的插件，webstorm本身就自带编译Sass，这里就不详细介绍了。

4.使用在线编译器

戳这里

Sass常用语法

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是scss(支持css3，推荐使用)

1.文件导入

使用@import “文件名”来导入css或scss文件，如果导入的是scss文件，那么被导入的文件(一个或多个)都会被编译最终只生成一个css文件。导入的scss文件可以省去后缀。如果导入的是css文件，那么它将以被导入的形式出现在那么最终生成的css中。

1
@import "style"//省略后缀的style.scss

2.注释

与Less相同，Sass有两种注释：编译到css文件的/**/和不被保存的//。

3.变量

使用”$变量名”的方式来声明一个变量，与Less的@变量名不同，Sass的这种声明方式更加接近高级程序设计语言。

1
2
3
4
$color:blue;
.div{
    background-color:$color;
}

特殊变量：一般用于属性，形式为#{变量名}。

1
2
3
4
$var:left;
.div{
    border-#{$var}:1px solid black;//border-left
}

4.嵌套

Sass支持选择器的嵌套，使得父子关系和代码结构更加清晰。

1
2
3
4
5
6
7
8
9
10
.father{
    width:100px;
    height:100px;
    .son{
        background-color:blue;
        &:hover{
             background-color:red;//&匹配它的上一级选择器
        }
    }
}

属性嵌套

1
2
3
4
5
6
7
.div{
    width:100px;
    height:100px;
    border:{    //注意有:
        radius:10px;//相当于border-radius:10px
    }
}

@at-root
@at-root可以让它后面的选择器跳出嵌套，自己作为根。

1
2
3
4
5
6
7
8
9
.father{
    .son{
        @at-root .skip{
        }
    }
}
//.father{}
//.father .son{}
//.skip{}

5.mixin 混合

mixin可以实现类似于函数的功能，它可以无参，可以有参，也可以指定默认参数。用法和Less相似。
通过@mixin来创建一个混合，通过@include来使用它。

通过无参的mixin来创建一个代码块

1
2
3
4
5
6
7
8
9
@mixin init{
    width:100px;
    height:100px;
    background-color:blue;
}
//调用这个代码块
.div{
    @include init;
}

为mixin指定参数和缺省值

1
2
3
4
5
6
7
8
@mixin width($width:50){   //可以指定默认值，这里是50
  width:$width px;
}
.div1{
  @include width(200); //200px
}
.div2{
  @include width();  //50px

mixin允许有多个参数

1
2
3
4
5
6
7
8
@mixin mul($width:100,$height:100,$background:blue){
  width:$width px;
  height:$height px;
  background-color: $background;
}
.div{
  @include mul();
}

mixin最常用的地方就是css3的hack代码(如border-radius等)

1
2
3
4
5
@mixin rounded($v,$h,$radius:5px){
　　-webkit-border-#{$v}-#{$h}-radius: $radius;
　　-moz-border-radius-#{$v}#{$h}: $radius;
　　border-#{$v}-#{$h}-radius: $radius;
}

6.继承

Sass的继承类似于高级程序设计语言的继承，可以使用@extend从一个选择器(占位符)继承它的样式。

1
2
3
4
5
6
7
8
9
.father{
  width:100px;
  height:100px;
  background-color: black;
}
.son{
  @extend .father;  //继承了.father的所有样式
  border-width:2px;
}

占位符：要实现继承必须有父类，也就是必须要有一个选择器来实现被继承，但是这个父选择器最终也会被编译成css样式。Sass提供了占位符这个功能来实现类似于接口的功能，可以为占位符设定样式，占位符可以被继承并且它最终不会被编译到css文件中，这个功能大大减少了css代码。

1
2
3
4
5
6
7
8
9
%father{
  width:100px;
  height:100px;
  background-color: black;
}
.son{
  @extend %father;  //继承了%father的样式，但是%father最终不会被编译
  border-width:2px;
}

7.函数

Sass提供了一些函数，其中最常用的是color函数。用户也可以自己定义函数。
常用的color函数:lighten($color,$amount)和darken($color,$amount)代表颜色减淡和加深,第一个参数为颜色，第二个参数为百分比。

1
2
3
body{
  background-color: lighten(black,50%);//gray
}

自定义函数

1
2
3
4
5
6
@function myfunction($width){
  @return $width*2 px;
}
.div3{
  width:myfunction(300);
}

8.运算

Sass支持变量之间以及变量直接和数值的运算，要注意运算符前面要有一个空格。用法同Sass，这里就不详细叙述了。
条件语句@if和@else：

1
2
3
4
5
6
7
8
$var:100;
.div{
    @if($var==100){
    width:100px;
}
    @else{
    width:200px;
}

三目判断if(condition,true,false)第一个参数代表条件，第二个参数代表为真的时候的值，第三个代表为假的时候的值。

1
2
3
4
$var:100;
.div{
    width:if($var==100,200px,300px);   //width:200px
}

循环@for、@while

1
2
3
4
5
6
7
8
9
10
@mixin block{
    width:100px;
    height:100px;
    background-color:black;
}
@for $i from 1 through 10{    //through包括10而to不包括10
  .item-#{$i}{
    @include block;//.item-1 —— .item10:{}
  }
}

使用@each来遍历
单个list字段

1
2
3
4
5
6
$i:1,2,3,4,5,6,7,8,9,10;
@each $temp in $i{
  .item-#{$temp}{
    border:1px solid red;
  }
}

多个list字段

1
2
3
4
5
6
$i:(1,blue),(2,grey),(3,yellow),(4,red),(5,black),(6,green),(7,white),(8,gold),(9,blue),(10,red);
@each $temp1,$temp2 in $i{
  .item-#{$temp1}{
    background-color: $temp2;
  }
}

遍历map字段

1
2
3
4
5
6
$map:(h1:2em,h2:3em,h3:4em);
@each $key,$value in $map{
  #{$key}{
    font-size:$value;
  }
}
标签
博客 技术博客 css
ESC