CSS进阶之SASS入门指南#
随着跟着公司学习项目的前端的推进，越来越对好奇了许久的SASS垂涎欲滴，哈哈，可能这个词使用不当，没有关系，就是对SASS有一股神秘的爱！好了，闲话不多说，上手SASS。
一、安装与配置##
-
安装Ruby
由于sass是紧密依赖于ruby语言实现在服务器端编译过程的，所以必须先安装好ruby。对于windows用户来说，需要手动下载安装[官网：https://www.ruby-lang.org/en/downloads/]
-
安装SASS
点击运行ruby的dos窗口程序，输入行命令：gem install sass
Linux用户：sudo gem install sass
二、编译运行##
查看sass文件转化成css内容：sass example.scss
scss文件编译城css文件：sass example.scss example.css
三、SASS语法##
1.变量###
SASS允许使用变量，所有变量以$开头，如果变量需要嵌套在字符串之中，就必须需要写在之中（Eg3）
基本使用#####
//Eg1:变量的基本使用
$tmp_color:red;
#t { color: $tmp_color; }
//Eg1:编译结果：
#t { color: red; }
错误实例#####
//Eg2:错误实例
$mystyle-text-left:text-align:left 【X】
组合嵌套变量与值######
通常情况下，一些数字，样式的颜色值，方向之定义为变量的形式，在样式中调用即可。
//Eg3:放置在字符中需要加#{}符号
//注意：scss文件中的注释中不可以出现#{}，否则依照目前的sass语法规则，将可能出现编译失败
$side:5;
$common_width:200;
.border {
width:#{$common_width}px;//#{}
border: solid 1px red;
border-radius:#{$side}px;
padding:#{$side}px;
}
//Eg3:编译结果：
.border {
width: 200px;
border: solid 1px red;
border-radius: 5px;
padding: 5px;
}
2.计算##
SASS允许在代码中使用算式，可以是两个数值运算，也可以是变量间的求值。（Eg4）
计算######
//Eg4:计算
$num1:5;
.border2 {
margin: (14px/2); //值与值乘商
top: 50px+100px; //值与值加减
right: $num1*2px; //变量与值乘商
bottom:#{$num1+$num1}px; //变量与变量加减
}
//Eg4：编译结果：
.border2 {
margin: 7px;
top: 150px;
right: 10px;
bottom: 10px;
}
3.【复用:mixin/include;extend】##
复用功能之一(继承):SASS允许一个选择器，继承另一个选择器。
复用功能之二(Mixin):SASS中可以定义一个Mixin，它的功能有点想C语言的宏，它是可以重用的代码块。
【说明】可以在定义时，设置参数或者不设置，调用这个块时，直接使用艾特include命令
继承(@extend)######
//Eg5:extend继承
//比如，现有名为a1的类别，a2要继承a1，则使用下列命令：
$num:10;
.a1 {
color: blue;
}
.a2 {
@extend .a1;
font-size: $num+px;
}
//Eg5:编译效果：
.a1, .a2 {
color: blue;
}
.a2 {
font-size: 10px;
}
Minxin######
//Eg6:mixin继承
@mixin bandf($boder_size, $font_size) {
border: solid $boder_size+px red;
font-size: $font_size+px;
}
.a3 {
@include bandf(2, 13);
}
//Eg6:编译结果：
.a3 {
border: solid 2px red;
font-size: 13px;
}
4.条件语句###
在SASS中，可以使用 艾特if 或 艾特if-else 或 艾特 if-else if 来进行条件的判断
条件语句######
//Eg7:条件语句
$num:8;
.a4 {
@if $num==5 {
color: blue;
}
@else if($num==4) {
color: red;
}
@else {
color: yellow;
}
}
//Eg7:编译结果：
.a4 {
color: yellow;
}
5.循环语句###
在SASS中，可以使用 艾特for 或者 艾特while、艾特each来进行循环的操作
循环语句######
//Eg8:循环语句
@for $i from 1 to 10 {
.a5_img#{$i} {
background-image: url('images/img#{$i}.png');
}
}
$j:9;
@while $j>0 {
.a5_img#{$j} {
background-image:url('images/img#{$j}.png');
}
$j:$j - 1;
}
@each $item in 1,2,3,4 {
.a7_img#{$item} {
background-image:url('images/img#{$item}.png');
}
}
//Eg8:编译结果：
.a5_img1 { background-image: url("images/img1.png"); }
.a5_img2 { background-image: url("images/img2.png"); }
.a5_img3 { background-image: url("images/img3.png"); }
.a5_img4 { background-image: url("images/img4.png"); }
.a5_img5 { background-image: url("images/img5.png"); }
.a5_img6 { background-image: url("images/img6.png"); }
.a5_img7 { background-image: url("images/img7.png"); }
.a5_img8 { background-image: url("images/img8.png"); }
.a5_img9 { background-image: url("images/img9.png"); }
.a5_img10 { background-image: url("images/img10.png"); }
6.自定义函数###
在SASS中，可以允许用户使用 艾特function 命令去编写自己的函数
【说明】使用 艾特function +函数名称，每个函数都需要有返回值的内容
//Eg9:自定义函数
@function du($r){
@return $r*2;
}
.a8{
border:solid #{du(2)}px red;
}
//Eg9:编译结果：
.a8 {
border: solid 4px red;
}