CSS预处理器:SASS快速入门

2018年3月4日20:31:32 发表评论 54

在之前我写过一篇CSS进阶:LESS快速入门的文章,这次这个sass和less一样是css预处理器,同样对对css的编写提高不少的效率,虽然sass和less用法都差不多,但在网上浏览博客时,总是发现sass比less讨论的人更多,用的人也更多,所以说有必要把sass的基本用法也学习一下。

CSS预处理器:SASS快速入门

一、安装sass

sass是ruby语言写的,所以必须先安装ruby,然后再把sass装好。

如果你是使用webpack或者其它打包工具,可直接在项目中写sass,比如vue-cli搭建的vue项目,只需要安装sass的loader就可以直接使用了。

这里假定你已经安装好了ruby,接下来只需要在命令行里输入:

gem install sass

就可以使用sass了,这点相比less是比较麻烦的。

二、sass编译

如果你对css是一定的了解,那么对sass的理解也会更加的快,sass文件后缀名是.scss,意思是Sassy CSS。

通过下面的命令可以将.scss文件转化为css代码:

 sass test.scss

或者保存一个指定的css文件名:

sass test.scss test.css

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

* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。

在生产环境中,我们一般是使用compressed来编译

三、sass基本使用

1.变量

在sass中,所有变量以$开头

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

也可以将变量镶嵌在字符串中,就必须使用#{}

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

2.计算功能

在sass中,同样可以使用算式:

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

3.嵌套

    div h1 {
    color : red;
  }

也可以这样写:

    div {
    hi {
      color:red;
    }
  }

就连属性也是可以嵌套的,比如说border-color属性,但是border必须加上冒号:

    p {
    border: {
      color: red;
    }
  }

在嵌套中,可以用&引用父元素,比如a:hover

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

4.注释

据我了解less的注释只有一种,在编译时也不会被保留,而在sass中,有两种注释风格:
1. 标准css注释/* comment / ,会保留到编译后的文件。
2. 单行注释:// comment,只会在sass文件中显示,编译后被省略。
像下面这样在/
加个!号是表示重要注释,编译后会保留,就算是压缩模式下的编译,通常放版权信息:

  /*! 
    重要注释!
  */

四、sass代码重用

1.继承

在sass选择器中允许继承另一个选择器,比如说base:

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

base2继承base,就要使用@extend命令:

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

2.Mixin

sass中的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);
  }
```  
来看一个mixin实例,用来生成浏览器前缀:
```css
    @mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }
``` 
这样调用:
```css
    #navbar li { @include rounded(top, left); }
  #footer { @include rounded(top, left, 5px); }
``` 
### 3.颜色函数
颜色函数可以很方便的生成一系列的颜色:
```css
    lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

4.插入文件

和css引入同样,可以使用@import命令来插入外部文件:

 @import "path/file.scss";

四、sass高级用法

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;
  }

2.循环语句

支持for循环,好像less不支持吧:

 @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循环:

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

3.自定义函数

还支持自定义函数:

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

less和sass有很多相似之处,个人认为sass更加强大点,并且有团队长期维护,更加可靠,不过还是要根据个人需求或者公司的需求来进行选择,工具是死的,人是活的。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: