sass学习

安装及使用

安装

安装 sass 要先安装 Ruby
地址为 https://rubyinstaller.org/downloads/
根据自己电脑下载相应版本

ruby -v 测试安装是否成功

安装 sass npm install -g sass

使用

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

命令行编译配置选项

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

命令行CSS四种排版样式

--style表示解析后的css是什么排版格式;
sass内置有四种编译格式:nested``expanded``compact``compressed。
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

四种编译排版演示;

未编译样式

.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}

nested 编译排版格式

/命令行内容/
sass style.scss:style.css --style nested

/编译过后样式/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }

expanded 编译排版格式

/命令行内容/
sass style.scss:style.css --style expanded

/编译过后样式/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}

compact 编译排版格式

/命令行内容/
sass style.scss:style.css --style compact

/编译过后样式/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

/命令行内容/
sass style.scss:style.css --style compressed

/编译过后样式/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

变量的定义

sass使用$符号来标识变量
建议通过 头部声明变量的形式
后面调用即可 变量名发生改变，同步更新

嵌套CSS声明

如想实现如下代码

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

我们只需要通过嵌套的方式实现

  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}