Sass
sass基于Ruby
语言开发而成,因此安装sass前需要安装Ruby。
ruby安装
http://www.ruby-lang.org/zh_cn/downloads/
安装后命令行输入ruby -v
由于gem 源不稳定,所以切换国内源
//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替换成功
gem sources -l
https://gems.ruby-china.com
Sass安装
gem install sass
gem install compass
成功后输入 sass -v
命令行,显示ruby sass版本号
Sass编译
- 建立一个 .scss 文件(以index.scss为例),注意文件的后缀为 .scss。
- shift+右击,点击
在此处打开powershell窗口
,在命令行中输入:sass index.scss index.css
。执行完毕后自动生成一个index.css文件
文件监视
sass -w index:scss:index.css
通过sass监视,一旦 sass 文件内容发生变化,则可以立马编译出最新的 css 文件
变量
sass 中的变量允许你在样式中的某个地方对常用值进行定义,然后应用到样式中,这样只要改变你定义的变量参数值就可以达到改变全局的效果。
$baseclor: red;
.box {
width: 100px;
height: 100px;
background-color:$baseclor;
}
四则运算
在css里面可以通过 + - * / 进行 加减乘除四则运算。
注意
:在进行除法的时候运算符要加括号。
$baseclor: red;
$length:2px;
.box {
width: 100 + 50px;
height: 100-50px;
padding: (10px /2);
border: $length*2 solid #000;
background-color: $baseclor;
}
嵌套规则
scss 可以让我们以嵌套的方式编写层叠样式。
注意
:& 符号的使用:如果要写并集选择器,而不是写后代选择器,就可以用到&了。 这点对伪类尤其有用如 :hover 和 :focus,&表示上一级元素。
$baseclor: red;
.box {
width: 100px;
height: 100px;
background-color: @baseclor;
&:hover{
background-color: gold;
}
}