vue项目使用Sass

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

安装

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

在build文件夹下的webpack.base.conf.js的rules里面添加配置

// 如果你是.sass文件要设置
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

使用

(1) 变量
sass让人们受益的一个重要特性就是它为css引入了变量

$back: red
#app
  color: $back
// 变量声明也分为全局变量和局部变量 

// 这样也是好用的

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

(2)嵌套css规则
css中重复写选择器是非常恼人的,往往需要 一遍又一遍地写同一个ID
例如：

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

可以写成：

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

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

(三)嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

// 编译后

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

导入SASS文件

sass有一个@import规则，sass的@import规则在生成css文件时就把相关文件导入进来

转载：Sass教程