sass入门篇

sass

sass 初步认识

sass是一个利用变成思想来编写CSS代码和实现代码规范化的工具

sass和scss

sass和scss是同样的一个东西，只不过两者的文件名的后缀和书写方式不一样。

• sass文件以.sass为后缀，遵循严格的缩进式语法规则，不包含"{}"和";"
• scss文件以.scss为后缀，书写方式和CSS基本一致

sass的语法格式

1、老版本的sass使用的是缩进的方式来编写

$background-color:red;
$font:16px;
body
  font:$font
  background-color:$background-color

老版本的sass格式的sass文件以.sass为后缀，遵循严格的缩进格式。

2、新版本的sass语法格式和CSS一样

$background-color:red;
$font:16px;
body{
  background-color:$background-color;
  font:$font;
}

新版本的sass语法格式的sass文件以.scss为后缀，推荐使用新版本的sass语法格式

sass编译

sass这是类似于规定编译CSS的命令一样，在问价里面为编译CSS文件写好各种规定，但是实际项目中用的还是CSS文件，因此，需要编译工具。
1、命令编译
命令编译就是使用电脑的终端，输入sass指令来进行sass的编译。

• 单文件编译

sass<要编译的sass的文件的路径>/style.scss:<CSS文件要存储的路径>/style.css
sass style.scss:D:hope/sass/css/style.css

• 多文件编译

sass sass/:css/

表示将项目中的“sass”文件夹中的".scss"或者是".sass"文件编译成".css"文件，并且将这些文件存放在项目中的"css"文件夹中。

实际编译过程中可以通过开启watch来检测代码的变化

sass --watch<要编译的sass的文件的路径>/style.scss:<CSS文件要存储的路径>/style.css

2、GUI工具编译
为了方便，可以使用一些GUI工具辅助编译，也就是自动化编译。

3、自动化编译
常见的工具有：

• Gulp
• Gunt

编译过程中常见的错误是字符编译的错误，因此建议在最前面加上“utf-8”

不同的样式输出风格

在输出指令的最后加上 "--style 要输出的风格"

• nested：嵌套输出方式

sass --watch test.scss:test.css --style nested
body {
  color: red;
  width: 1200px;
  height: 400px; }

• expanded：展开输出方式

sass --watch test.scss:test.css --style expanded
body {
  color: red;
  width: 1200px;
  height: 400px; 
  }

• compact：紧凑输出方式

sass --watch test.scss:test.css --style nested
body {color: red;width: 1200px;height: 400px; }

• compressed：压缩输出方式

sass --watch test.scss:test.css --style nested
body {color: red;width: 1200px;height: 400px; }div{color: red;width: 1200px;height: 400px;}

sass变量

1、定义变量：$+name+value
最简单的变量四直接存贮有样式的变量，如：

$width:200px
$height:300px
body{
  width:$width;
  height:$height;
}
//编译后的CSS样式
body{
  width:200px;
  height:300px;
}

2、变量类型

• 普通变量
  普通变量定义之后可以再全局范围使用

$width:1200px;
body{
  width:$width;
}

• 默认变量
  在变量后面加上!default，默认变量用于设置默认值，可以根据需要对默认变量进行覆盖，在默认变量前面重新声明变量

$height:200px !default;
body{
  height:$height;
}
//css
body{
  height:200px;
}
//默认变量覆盖
$height:300px;
$height:200px !default;
body{
  height:$height;
}
//css
body{
  height:300px;
}

3、局部变量和全局变量

• 全局变量
  在选择器、函数、混合宏等的外啊面定义的变量，可以全局调用。

$color:red;//全局变量
.block{
  color:$color;
}

• 局部变量
  在选择器、函数、混合宏的内部定义的变量，局部调用

body{
  $color:red;
  a{
    color:$color;//调用局部变量
  }
}

• 全局变量的影子
  在局部范围内声明一个已经存在于全局范围内的变量，局部变量会将全局变量覆盖掉，但是只是在局部的范围内随变量进行覆盖

sass 嵌套

1、选择器嵌套
直接使用选择器进行嵌套。

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
//sass
div{
  li{
    color:red;
    ul & {
      color:green;
    }
  }
}
//css
div li{
  color:red;
}
div ul li{
  color:green;
}

2、属性嵌套
对于一些开头一样但是后缀不一样的属性可以使用属性嵌套。比如border-top、border-bottom等

div{
  border:{
    top:1px solid green;
    bottom:1px solid red;
  }
}
//css
div {
  border-top: 1px solid green;
  border-bottom: 1px solid red;
}

3、伪类选择器
伪类选择器借助&实现嵌套

 div{
   &:after,
   &:before{
     content:"";
     width:12px;
    height:2px;
    color:red;
   }
   &:after{
     content:"";
     border-top:1px solid green;
   }
 }
 //css
 div:after, div:before {
  content: "";
  width: 12px;
  height: 2px;
  color: red;
}
div:after {
  content: "";
  border-top: 1px solid green;
}

混合宏

混合宏适用于在需要重复使用大段的样式的时候使用

1、声明混合宏
使用@mixin来声明混合宏

@mixin border-radius{
  -webkit-border-radius:5px;
  border-radius:5px;
}

@mixin声明混合宏的关键字，类似CSS中的@media，上面的代码中，border-radius是混合宏的名字，大括号里面是重复的代码片段。

2、带参数的混合宏

@mixin border-radius($radius:5px){
  webkit-border-radius:$radius;
  border-radius:$radius;
}

3、调用混合宏
@include用于调用声明好的混合宏

@mixin border-radius($a:5px){
   webkit-border-radius:$a;
   border-radius:$a;
}
div{
 @include border-radius;
}
//css
div {
  webkit-border-radius: 5px;
  border-radius: 5px;
}

4、混合宏的参数

• 不带值的参数
  可以传入不带值的参数，最后在调用的时候传入传入参数就可以。

@mixin border-radius($a){
   webkit-border-radius:$a;
   border-radius:$a;
}
div{
 @include border-radius(5px);
}
//css
div {
  webkit-border-radius: 5px;
  border-radius: 5px;
}

• 传入一个带值参数

@mixin border-radius($a:5px){
   webkit-border-radius:$a;
   border-radius:$a;
}
div{
 @include border-radius;
}
//css
div {
  webkit-border-radius: 5px;
  border-radius: 5px;
}

• 调用多个参数
  传入多个参数，每个参数之间用逗号隔开

@mixin example($width,$height){
  width:$width;
  height:$height;
}
div{
  @include example(1200px,300px);
}
//css
div {
  width: 1200px;
  height: 300px;
}

"..."参数：当混合宏的参数很多的时候，可以使用这个参数来代替

@mixin box-shadow($shadows...){
  @if length($shadows)>= 1{
    -webkit-box-shadow:$shadow;
    box-shadow:$shadow;
  } @else {
    $shadow:0 0 2px rgba(#000,.25);
    -webkit-box-shadow:$shadow;
    box-shadow:$shadow;
  }
}
.div{
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
//css
.div {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

混合宏并不会将重复的代码只能合并，而是留下冗余的代码

继承

@extend：使用@extend对某个元素的样式进行继承

.div1{
  width:1200px;
  height:300px;
  border:1px solid green;
}
.box{
  @extend .div1;
  color:red;
  font-size:14px;
}
//css
.div1, .box {
  width: 1200px;
  height: 300px;
  border: 1px solid green;
}
.box {
  color: red;
  font-size: 14px;
}

占位符

占位符可以取代以前的CSS的基类造成的代码冗余的情形，但是%声明的代码如果不被@extend调用的话不会产生任何代码。

%a{
  padding-top:10px;
}
%b{
  margin-top:20px;
}
.div3{
  @extend %a;
}
.div4{
  @extend %a;
  @extend %b;
}
div2{
  @extend %b
  }
 //css
 .div3, .div4 {
  padding-top: 10px;
}
.div4, div2 {
  margin-top: 20px;
}

需要注意的是占位符根据的是属性对选择器进行归类

%a{
  padding-top:10px;
}
%b{
  margin-top:20px;
}
.div3{
  @extend %a;
  @extend %b;
}
//css
.div3 {
  padding-top: 10px;
}
.div3 {
  margin-top: 20px;
}

插值

#{}：提供选择器和属性名称中的sassscript变量。在花括号中指定变量和属性值。

$prop:margin;
@mixin set-value($side,$value){
  #{$prop}-#{$side}:$value;
}
.div4{
  @include set-value(top,12px);
}
//css
.div4 {
  margin-top: 12px;
}

可以使用#{}构建一个选择器

@mixin set-value($class,$small, $medium,$big){
  .#{$class}-top{font-size:$small;}
  .#{$class}-left{font-size:$medium;}
  .#{$class}-bottom{font-size:$big;}
}
@include set-value(slider-text,12px,13px,14px);
//css
.slider-text-top {
  font-size: 12px;
}
.slider-text-left {
  font-size: 13px;
}
.slider-text-bottom {
  font-size: 14px;
}

sass 注释

1、"/* */"：注释不会再CSS文件中显示
2、"//"：注释会在CSS文件显示

数据类型

1、数字：包括纯数字和带有单位的数字，如：1,2,3,14px
2、字符串：包括有引号字符串和没有引号字符串，"head"、'bar'、doit
3、颜色值
4、布尔值
5、空值
6、列表值：用空额或者是逗号分开。如：1.5em 3em 4em ;Helvetica,Arial,sans

字符串

1、有引号的字符串：如：“Lucida Grande”
2、无引号字符串，如：sans-seribold

只有在使用插值的时候会将引号字符编译为无引号的字符，其余情况下字符串的类型不会被改变。

值列表

值列表：margin:10px 15px 0px 0px;或者font-family:Helvetica,Arial,sans-serif

sass列表函数

• nth函数：可以直接访问值列表中的某一项
• join函数：将多个值列表联结在一起
• append函数：在值列表中添加值
• @each规则：给值列表中的每个项目添加样式

值列表可以再包含值列表：1px 2px,3px 4px
内外两层值列表使用相同的分割方式，要用圆括号包裹内层:(1px 2px)(3px 4px)
值列表包含空的值列表或者是空值的时候编译将消除空值

加法和减法

可以再变量和属性中做加法运算，但是单位要一致

.box{width:20px+8in;}
//css
.box{width:788px;}
$a:300px;
$b:400px;
.box{width:$a+$b;}
//css
.box{width:700px;}

乘法

乘法用*表示，乘法中只能有一个值带有单位，不支持同时出现种单位

$a:2px;
$b:3;
ul{width:$a*$b;}
//css
ul {
  width: 6px;
}

除法

1、纯数字除法运算时，需要加括号

.box{ width:(100px/2);}

2、"/"被当成是除号的情况

• 数字或者是其任何一部分是存储在一个变量中或者是函数返回的值
• 数值被括号包围
• 数值是另外一个数学表达式的一部分

3、当两个值具有相同的单位时，得到一个不带单位的值。

数字运算

sass中的数字运算和数学运算一样

.box1{
  width:((220px + 720px) - 11*20)/12;
}
//css
.box2{width:60px;}

颜色运算

1、颜色的运算是分段式运算，红绿蓝各段分别进行各自的运算。

p{
   color:#010203 + #040506;
}
p{
  color:#010203*2;
}
//csss
p{ color:#050709;}
p{ color:#020406;}

字符串运算

直接使用“+”将字符串进行连接，可以直接连接也可以使用变量进行连接。

两种比较特殊的结果：

• 有引号的字符串+没有引号的字符串：得到带有引号的字符串
• 没有引号的字符串+有引号的字符串：得到没有引号的字符串

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//css
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }