学习博客:Sass入门
Sass
CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间,且易于维护。引入合理的样式复用机制:变量、混入、选择器、继承、内置函数。
安装
// vue-cli2 中需要手动安装,vue-cli3 在初始化项目时可以选配安装
npm install node-sass --save-dev
npm install [email protected] --save-dev
sass-loader最新版本8.0会报错,降级到7.3可以解决
简写形式
// -D 代表 --save-dev,开发时的依赖,安装的模块是开发时使用
// -S 代表 --save,运行时的依赖,安装的发布时使用
npm i node-sass [email protected] -D
安装node-sass依赖python2.x环境,需要先安装python再配置环境变量
参考博客:node-sass 安装失败的各种坑、Error: Can't find Python executable "python", you can set the PYTHON env variable.解决办法
vue-cli项目使用
建立src/common/style文件夹存放.scss文件,建立base.scss
变量
// 变量声明,以$开头
$color1: red;
$color2: blue;
$fs-small: 14px;
$fs-middle: 16px;
@import 引入
在home.vue在引入base.scss,注意分号不能省略
<style scoped lang="scss">
@import '@/common/style/base.scss';
// 使用变量
.text {
color: $color1;
font-size: $font-size-small;
}
</style>
嵌套
.title {
.text {
color: $color1;
}
&:after {
// 等价于 .title:after
}
&.title-text {
// 声明<div class="title title-text">中title-text的样式
}
}
@mixin @include 混入
@import是引入整个样式文件,混入是在一个样式片段中插入另一个样式片段
在src/common/style文件夹下建立mixins.scss
// 加载2、3倍图,可传入变量
@mixin bg-image ($url) {
background-image: url($url + '@2x.png');
background-size: 100%;
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url($url + '@3x.png');
background-size: 100%;
}
}
// 1px边框,也可以设置默认值,插值#{}
@mixin border-1px ($color: #000, $position: bottom) {
position: relative;
&:after {
display: block;
content: '';
position: absolute;
#{$position}: 0; // 默认为bottom。可传入top
left: 0;
width: 100%;
height: 1px;
background: $color;
transform: scaleY(0.5);
}
}
// 单行溢出省略
@mixin textoverflow {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 多行溢出省略
@mixin textoverflows($line) {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
可变参数混入
有时,不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时我们就可以使用 ... 来设置可变参数。例如,用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数
@mixin box-shadow ($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
在home.vue在引入mixins.scss,注意分号不能省略
<style scoped lang="scss">
@import '@/common/style/base.scss';
@import '@/common/style/mixins.scss';
// 使用变量
.text {
color: $color1;
font-size: $font-size-small;
}
// 使用mixin,@include插入代码片段。支持同时插入多个mixin
.icon-logo {
width: 16px;
height: 16px;
@include bg-image('icon_sy_xq');
@include border-1px(#f1f1f1);
}
</style>
@extend 继承
从一个class中继承所有样式代码,如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。
.border-base {
margin: 20px 0;
padding-bottom: 10px;
color: $color2;
font-size: $fs-middle;
}
.border-1 {
@extend .border-base;
border-bottom: 1px solid #000;
}
.border-2 {
@extend .border-base;
@include border-1px(blue)
}
<div class="border-1"><i class="icon-border"></i>1px像素的线</div>
<div class="border-2"><i class="icon-border"></i>1px像素的线</div>
函数
使用场景:px转rem
@function px2rem ($px) {
@return ($px / 100) + rem;
}
// 使用时需要先引入函数所在文件
.search-box {
width: px2rem(300);
height: px2rem(150);
}
与Less的比较
大同小异,日常开发经常使用到的就是变量、嵌套、混入。Sass在混入需要声明@mixin、@include,在编写样式时很显得更规范、一目了然;而Less混入并不需要声明,直接引入使用。