vue-cli支持scss
vue-cli中已经内置配置好了sass 以及lass的配置。
如果需要的话直接下载两个模块就可以了
webpack它会根据 lang 属性自动用适当的加载器去处理。
npm install node-sass --save-dev
npm install sass-loader --save-dev
// webstrom在vue里的style使用
<style lang="scss" type="text/scss"></style>
当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此
1. 声明变量和引用
$warp-color: #f90;
.warp {
color: $warp-color;
}
//编译后
.warp { color: #f90 }
2. css嵌套和群组选择器
#app {
background: #ccc
.cont {
width: 1000px
}
p, h1, h2 {
color: #ff0
}
}
// 编译后
#app { background: #ccc }
#app .cont { width: 1000px }
#app p { color: #f00 }
#app h1 { color: #ff0 }
#app h2 { color: #ff0 }
3. &标识符表示父元素
// 添加伪类时
#app a{ //&等价于#app a
&:hover {
color: #f00
}
&:after
}
//编译后
#app a:hover { color:red }
// 在父选择器之前添加选择器
.cont{
width: 1000px
#app & {
color: #ff0
}
}
//编译后
.cont { width: 1000px }
#app .cont { color: #ff0 }
4. 子组合选择器和同层组合选择器：>、+和~
> 选择p元素下的直接子元素(span)
如：p > span 孙子元素不会选中
+ 选择p元素后紧跟的span元素
如：p + span
~ 选择p元素后的同层所有的span元素
如：p ~ span
#warp {
~ p { color: #000 }
> section { background: #eee }
.cont {
& + span {
color: #fff
}
}
}
//编译后
#warp ~ p { color: #000 }
#warp > section { background: #eee }
#warp .cont + span { color: #fff }
5.嵌套属性在 - 处断开
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
div {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
div {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
6. 局部文件创建局部文件 _night-sky.scss
局部文件编译时不会生成独立css文件，是专门为@import命令而编写的sass文件。
ass局部文件的文件名以下划线开头如:_night-sky.scss
这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入
导入文件@import "night-sky"(可以省略开头_和后缀.scss)
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时非常有用
7. 设置默认变量值!default
如果希望使用可以定制修改sass库文件中的某些值，可以使用!default:
含义: 如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值.
即: 用户在导入scss局部文件之前声明了$warp-color变量,那么局部文件的$warp-color: #f90 !default无效;
$warp-color: #f90 !default;
.warp {
color: $warp-color;
}
8. 嵌套导入@import "bule_theme"
sass允许@import命令写在css规则内 如：
//_blue-theme.scss 局部文件
aside {
background: blue;
color: white;
}
#warp {
@import "blue-theme"
}
//编译后
#warp {
aside {
background: blue;
color: white;
}
}
被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。
相当于块级作用域
9. 导入原生css和静默注释// 注释内容
把原生css的后缀改为.scss, 即可直接导入(不会产生额外下载)
如果直接导入css.css文件，会造成浏览器解析css时额外的下载
// 这块注释内容不会出现在生成的css中
/* 这块会出现在生成的css中 */
10. 混合器创建 @mixin 名字, 调用 @include 名字
通过sass的混合器大段样式的重用
// 名字必须语义化, 如下面的为: fillet
// 保证易读性和可维护性
@mixin fillet {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
//调用
notice {
border: 2px solid #000;
@include fillet
}
混合器中可以包含css属性、规则、选择器和选择器属性，如下代码:
@mixin no-bullets {
list-style: none;
li {
margin-left: 10px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
// 解析为
ul.plain { color: #444; list-style:none }
ul.plain li { margin-left: 10px }
11. 给混合器传参数
可以通过在@include混合器时给混合器传参赋值给变量，来定制混合器生成的精确样式
// 可以以$name: 值, 的形式声明默认值(css属性值、其他参数的引用)
@mixin link-colors(
$normal: #000,
$hover: #000,
$visited: #f00
){
color: $normal;
&:hover { color: $hover }
&:visited { color: $visited }
}
//调用
p{
@include link-colors(red)
}
//解析后
p { color: red; }
p:hover { color: #000 }
p:visited { color: #f00 }
- 选择器继承
@extend .class(类名)
.error {
border: 1px solid red;
background-color: #000;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 上面代码相当于 元素2的class="seriousError error"
元素2会继承元素1所有的样式
