Sass学习笔记

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;
    }

}