Sass入门教程及Sass基础用法指南

Sass入门教程及Sass基础用法指南

安装（Sass官网）

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

安装时请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境（安装Ruby时，路径中请勿出现中文，避免后续安装Sass失败）

安装完成之后，测试安装是否成功，运行cmd输入一下命令：

ruby -v

然后来正式安装sass

gem install sass

然后，就可以使用了

Sass使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件名后缀.scss，意思为Sassy CSS。下面的命令可以在屏幕上显示.scss文件转化的代码。（假设文件名为test）

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css后缀的文件

sass test.scss other.css

SASS提供四个变异风格的选项：

1. nested: 嵌套缩进的css代码（默认）
2. expanded: 没有缩进的、扩展的css代码
3. compact: 简介格式的css代码
4. compressed: 压缩后的css代码（一般生产环境使用）

scss --style compressed test.scss test.css

PS: 还可以监听某个文件或目录，一旦源文件有变动，就会自动生成编译之后的版本

# watch a file
sass --watch test.scss:output.css

#watch a directory
sass --watch app/sass:public/stylesheets

Sass基本用法

1. 变量 sass允许使用变量，所有变量都是以$开头

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

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

   $side: left;
   .test {
       border-#{$side}-radius: 4px;
   }
   

2. 计算功能

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

3. 嵌套

   div h1 {
       color: red;
   }
   // 可以写成
   div {
       h1 {
           color: red;
       }
   }
   // 属性也可以嵌套，比如border-color属性。可以写成: 注意：border后面必须加上冒号。
   p {
       border: {
           color: red;
       }
   }
   

   在嵌套的代码块内，可以使用$引用父元素。

4. 注释

   • 标准的css注释 / comment /, 会保留到编译后的文件

   • 单行注释 // comment, 只保留在SASS源文件中，编译后被省略

     在/* 后面加一个感叹号，表示这是'重要注释'。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

   /*!
   	重要注释！
   */
   

代码的重用

1. 继承

   sass允许一个选择器，继承另一个选择器。比如，现有class1

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

   class2要继承class1, 就要使用@extend命令

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

2. Mixin

   Mixin是可以重用的代码块

   使用@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(30px);
   }
   

   一个mixin的实例，用来生成浏览器前缀。

   @mixin rounded ($vert, $horz, $radius: 10px) {
       border-#{$vert}-#{$horz}-radius: $radius;
       -moz-border-radius-#{$vert}-#{$horz}: $radius;
       -webkit-border-#{$vert}-#{$horz}-radius: $radius;
   }
   

   使用的时候，可以像下面这样调用

   li {
       @include rounded(top, left);
   }
   p {
       @include rounded(top, left, 4px);
   }
   

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

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

4. 插入文件 @imoprt命令，用来插入外部文件

   @import 'path/test.scss';
   // 如果插入的css文件
   @import 'path/test.css';
   

高级用法

1. 条件语句 @if ... @eles ...

   // @if 可以用来判断
   p {
       @if 1 + 1 == 2 { border: 1px solid #ccc; }
       @if 5 < 3 {border: 1px solid red; }
   }
   // 配套的还有 @eles 命令
   @if lightness($color) > 30% {
       background-color: #000;
   } @else {
       background-color: #fff;
   }
   

2. 循环语句 @for @while @each

   // @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关键字
   @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);
   }