sass 安装使用
sass的安装
1.安装 ruby
下载安装 –傻瓜式安装
ruby -v //检验是否安装成功
2. 安装sass
gem install sass //等待安装完成
sass -v //检验版本
sass 的使用
1.编译 .scss 文件 切换到上一级目录下
sass 文件名.scss //编译sass文件
sass 源文件.scss 目标文件.css //编译并输入到指定的文件中
sass --style compressed test.sass test.css //编译压缩
2.定义变量
1).使用 $ 符定义变量
$blue : #1875e7;
div {
color : $blue;
}
2).如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3).使用默认变量
sass的默认变量仅需要在值后面加上!default
Sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式很简单,只需要在默认变量之前重新声明下变量即可。
$baseLineHeight : 2;
$baseLineHeight : 1.5 !default;
body {
line-height : $baseLineHeight; //编译后的结果为 line-height:2;
}
4.嵌套
.div {
h1 {
color:red;
}
} //编译后 .div h1{color:red;}
属性也可以嵌套
.div {
boder:{ //注意:这里必须使用':'
color:red;
width:1px;
}
} //编译后 .div1 { boder-color: red; boder-width: 1px; }
5.代码的重用
1).继承
sass允许一个选择器继承另一个选择器
.class1{color:red;}
.class2{
@extend .class1;
font-size:16px;
}
/* 编译后 .class1, .class2 {color: red; }
.class2 {font-size: 16px; } */
2).mixin宏
可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin。
.div2{
@include left;
border:1px solid red;
}
/*编辑后
.div2 { float: left;margin-left: 10px; border: 1px solid red; }
*/
mixin的强大之处,在于可以指定参数和缺省值。使用的时候,根据需要加入参数:
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
/* 使用时 */
.div4 {
@include left(20px);
}/*
编译后
.div4 { float: left; margin-right: 60px; }
*/
3).颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
参考w3cplus颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4).引入外部文件
@import命令,用来插入外部文件。
@import("path/filename.scss");
//如果引入的为css文件
@import "foo.css";
6.高级用法
1 条件语句
@if可以用来判断:
@charset "UTF-8";
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
//配套的还有@else命令:
$color : #ddd;
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
}
/*
编译结果:
.p {border: 1px solid;background-color: #000; }
*/
2 循环语句
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
3.支持while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
4.each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
7.自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}