Sass基础用法

Sass是什么

• 一种 css 预处理器和一种语言
• 是一个将脚本解析成CSS的脚本语言，即SassScript
• 通过定义一套新的语法规则和函数，以加强和提升CSS
• 增加了变量，继承，函数等特性

使用@import命令，来引入外部文件

@import "path/filename.scss";

SASS允许使用变量，所有变量以$开头

$blue : #1875e7;　
div {
  color : $blue;
}
//如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
$side : left;
.rounded {
　border-#{$side}-radius: 5px;
}

SASS允许嵌套

//选择器嵌套
div h1 {
　color : red;
}
//等价于
div {
  　h1 {
    　color:red;
  　}
}
//属性嵌套，比如border-color属性(border后面必须加上冒号)
p {
　　border: {
    　　color: red;
　　}
}
//在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
　&:hover { color: #ffb3ff; }
}

SASS允许继承，使用@extend命令

//选择器继承
比如，class2要继承class1，就要：
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

SASS允许使用@mixin命令，定义一个代码块（类似于宏定义），使用@include命令，调用这个mixin

@mixin left {
　  float: left;
}
div {
  　@include left;
}

//mixin的强大之处，在于可以指定参数和缺省值

@mixin left($value: 10px) {
　margin-right: $value;
}
//使用的时候，根据需要传入参数
div {
　@include left(20px);
}

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

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

SASS允许使用判断

//可以使用@if和@else来判断
@if lightness($color) > 30% {
　　background-color: #000;
}
@else {
　　background-color: #fff;
}

SASS允许使用@for，@while，@each进行循环

@for $i from 1 to 10 {
　.border-#{$i} {
　　　border: #{$i}px solid blue;
    }
}

SASS允许使用算式

body {
　　margin: (14px/2);
　　top: 50px + 100px;
}

SASS允许自定义函数

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