sass使用总结

Sass介绍

Sass是针对css的扩展，在sass中增加了可以使用变量、嵌套规则、mixins、导入这些功能。作用就是可以保持大型样式表结构良好，快速开发项目。

 

Scss 是sass引入的新的语法，不仅兼容css3还继承了sass的功能。区别就是scss是带花括号，sass不带。

 

安装有三种方法

1. 安装ruby
2. 使用命令 gem install sass
3. 可以使用sass –v 查看版本号

 

Sass提供了四种编译风格

　　* nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

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

* compressed：压缩后的css代码。

 

一般使用第四个

语法：sass --style compressed test.sass test.css

 

 

转化格式命令

1. 将sass转成css  执行命令 sass  style.sass  style.css /sass  sass文件名  css文件名    
2. Sass转成scss   sass-convert style.sass style.scss
3. SCSS 转换Sass  sass-convert style.scss style.sass  

 

扩展

一．嵌套规则

.flist {   margin: 0 auto;   width: 640px; }   .flist li {     width: 212px;     height: 170px;     float: left;     border-bottom:1pxsolidred;     text-align: center; }

.flist {

  margin: 0 auto;

  width: 640px;

  li {

    width: 212px;

    height: 170px;

    float: left;

    border-bottom: 1px solid red;

    text-align: center;

  }

｝

 

 

二．引用父选择符： &

 

a {   display: block;   margin-top: 24px; }  a:hover {     color: red; }

a{display:block;
  margin-top:24px;
  &:hover{
    color:red;
  }

｝

 

 

三．

.funky {   font-family: fantasy;   font-size: 30em;   font-weight: bold; }

嵌套属性

 

.funky {

  font: {

    family: fantasy;

    size: 30em;

    weight: bold;

  }

}

 

四．注释

 

  /**/ 或者 //都行

五．Sassscript  sass称为SassScript支持少量的扩展

$ sass -i

>> "Hello, Sassy World!"

"Hello, Sassy World!"

>> 1px + 1px + 1px

3px

>> #777 + #777

#eeeeee

>> #777 + #888

white

        

六．定义变量 $

　$blue : #1875e7;　

div {
　　　color : $blue;
　　}

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

$side : left；

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

七．Sass的数据类型

1. 数字 2文本字符串 3.颜色  4布尔值 5. 空值 null  6.值列表 用逗号或者空格分隔

 

Null 既不是true也不是false，没有任何值；

Bollen 是true和false，在sass中只有false和null才会返回false；其他一切都是，true

 

列表：其实就是数组，用空格或者逗号分隔

$pad-list:10px 20px 5px;

Maps ,以key /value的键值出现，必须是括号括起来，一个key只针一i个value

$styling: (

  'font-family': 'Lato',

  'font-size': 1.5em,

  'color': tomato,

  'background': black,

);

八．运算

1. 数字运算

Width:1px+2px;         width:3px

1. 除法运算 

在sass 中/这个符号是用来分隔数字的。但是以下三种情况会被解析成除法运算

2.1如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

2.2如果数值被圆括号包围。

2.3如果数值是另一个数学表达式的一部分。

 

p {

  font: 10px/8px;             // 纯 CSS，不是除法运算

  $width: 1000px;

  width: $width/2;            // 使用了变量，是除法运算

  width: round(1.5)/2;        // 使用了函数，是除法运算

  height: (500px/2);          // 使用了圆括号，是除法运算

  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算

}

 

 

3．字符串运算

 p {

  cursor: e + -resize;     // cursor: e-resize;  

}

p:before {

  content: "Foo " + Bar;  //带引号的字符串在 + 符号左侧，会生成带引号的字符串  content: "Foo Bar";

  font-family: sans- + "serif"; //没有引号的字符串在 + 符号左侧，会生成不带引号的字符串 font-family: sans-serif;

 }

4.圆括号 改变运算顺序

p {

  width: (1em + 2em) * 3;  9em

}

5.sass定义函数，具体可以参考：http://www.myexception.cn/HTML-CSS/2041535.html

•      length($list)：返回一个列表的长度值；
•       nth($list, $n)：返回一个列表中指定的某个标签值
•       join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
•       append($list1, $val, [$separator])：将某个值放在列表的最后；
•       zip($lists…)：将几个列表结合成一个多维的列表；
•       index($list, $value)：返回一个值在列表中的位置值。

6.#｛｝

6.1 变量和属性使用

$name: foo;

$attr: border;

p.#{$name} {

  #{$attr}-color: blue;

}

7.！default变量默认值

变量末尾加上！default  则是默认值，

假设变量申明带有!default，那么如果在此申明之前没有这个变量的申明，则用这个值，反之如果之前有申明，则用申明的值

//第一种，使用默认值 

//变量申明带有!default，但是之前没有这个变量的申明 

$color:blue !default; 

p{ color:$color}  blue

//第二种，使用前面定义的值

$color:red; 

//变量申明带有!default，但是前面还有这个变量的申明

$color:blue !default;

p{

    color:$color;//red

}

八 @规则和指令

8.1@import  引入sacc和sass文件 被合并成一个单一的css文件

语法：@import "foo.scss";

8.2 @extend 继承样式，这时候two就会有one的样式

.one {

       width:100px;height:100px;

}

.two {

       @extend .one;

       background:red;border:5px solid #000;

}

控制命令

8.3 @if

If（）是sass的内建函数，@if是一个内建指令。以下结果是green；

$type: monster;

p {

  @if $type == ocean {

    color: blue;

  } @else if $type == matador {

    color: red;

  } @else if $type == monster {

    color: green;

  } @else {

    color: black;

  }

}

8.4  for 指令用于循环输出，有两种使用方法

 From start through end   form start  to end

区别：前者遍历从strat 到end  后者从start 到end-1

@for $i from 1 through 4 {

    .col-#{$i} { width: 100/4 * $i + %;}

}

 

.col-1 {

  width: 25%;

}

 

.col-2 {

  width: 50%;

}

 

.col-3 {

  width: 75%;

}

 

.col-4 {

  width: 100%;

}

 

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

$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );

 

@each $key, $usr in $ppl  {

    .#{$usr}-avatar {

        background-image: url('/img/#{$usr}.png');

    }

}

 

8.6 @while 指令也可以用于循环输出，它后面跟一个表达式，如果表达式结果为 false，则停止循环体。下面使用 @while 

$x:1;

 

@while $x < 13 {

    .col-#{$x} { width: 100/12 * $x;}

    $x: $x + 1;

};

 

 

8.7  @mixin  定义一个模块

定一个名字为mixin的模块

@mixin  content-block｛

         margin-left:auto;

         margin-right:auto;

｝

 

使用

第一步先引入 mixin的文件

@import ‘mixin’

#header｛

         Width:1000px;

         @Include:conent-block;

｝

 

.gallery{

    width:600px;

    @include center-block;

}

 

解析成

#header {

  width: 1000px;

  margin-left: auto;

  margin-right: auto;

}

.gallery {

  width: 600px;

  margin-left: auto;

  margin-right: auto;

}

 

 

Mixin还可以传参数

@mixin float($float:left) {

  float: $float;

  @if $lte7 {

    display: inline;

  }

 

调用

.fl{

    @include float;

}

.fr{

    @include float(right);

}

}

 

解析

.fl{

    float:left;

    display: inline;

}

.fr{

    float:right;

    display: inline;

}

 

8.8 占位符  %

定义

%center-block {

@include center-block;

｝

调用

 

#header{

    width:1000px;

    @extend %center-block;

}

.gallery{

    width:600px;

    @extend %center-block;

}

%占位符和@mixin的区别

1.%定义的占位选择器样式不能传递参数。

2.然后@extend调用%申明的东西时，必须要把%带上，@extend %clearfix正确，而@extend clearfix是错误的调用。

3.%定义的样式，如果不调用是不会产生任何样式的，这也是用%定义样式比用原先的class方法定义样式高明的一方面。

转载于:https://www.cnblogs.com/yazhng/p/5600493.html