vue项目使用Sass
Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。安装npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass在bui
·
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教程
更多推荐
已为社区贡献2条内容
所有评论(0)