sass,less是什么?
css的预编译。把css当成函数编写,可以定义变量,嵌套,混合器
安装sass使用的步骤/如何配置sass?
一、安装对应依赖node模块:
npm install node-sass --save-dev
npm install sass-loader --save-dev
二、配置webpack.base.config.js
在loaders里面加上
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
est: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}]
三、在用scss的地方声明
<style lang="scss" scoped type="text/css"></style>
♥ scoped 表示样式只在当前组件有效
有哪几大特性?
1、可以用变量
如果你的网站中有几处样式相同的话,比如一些颜色和字体,那么可以使用变量来处理这个问题
例如($变量名称=值);
2、可以用混合器@mixin
当你的样式越来越多,需要复用大段的样式,独立变量就显得有点吃力了,这时候你可以通过sass中的混合器来进行复用(当然也可以用占位符或者继承).
- 2.1 多值参数:
调用时可不传参数,则使用默认值,也可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。
@mixin cont($color:red,$fontSize:14px){
color: $color;
font-size: $fontSize;
}
body{
@include cont();
}
/* 生成代码: */
/* line 8, ../sass/mixin.scss */
body {
color: red;
font-size: 14px;
}
- 2.2 多组参数:
如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...。
/* scss: */
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
/* css: */
.box {
border: 1px solid #ccc;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
}
注意:如果不写这三个点,会报错:混合器只带一个参数,却传入了3个参数
以上小结:当大量复用样式中需要使用到变量的时候可以使用混合器@mixin进行重写,例如圆角的兼容性,处理浏览器前缀等问题,否则使用继承@extend进行重写
- 2.3 混合器、占位符之间的区别
区别:
当在一个页面中多次调用的话,@mixin不会将样式相同的代码进行合并,而使用占位符多次调用的话则会将样式相同的代码进行合并.
混合器@mixin
优点:可传参
缺点:如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余.
/* scss: */
@mixin my-color{
color: red;
}
.div1{
@include my-color;
}
.div2{
@include my-color;
}
/* 生成之后的css:*/
/* line 5, ../sass/mixin2.scss */
.div1 {
color: red;
}
/* line 9, ../sass/mixin2.scss */
.div2 {
color: red;
}
占位符 %
优点:当在一个页面中多次调用的话,会将样式相同的代码进行合并
缺点:不能传参
%my-color{
color: green;
}
.div3{
@extend %my-color;
}
.div4{
@extend %my-color;
}
生成代码:
/* line 13, ../sass/mixin2.scss */
.div3, .div4 {
color: green;
}
3、可以嵌套
父子关系一目了然
.div1
background-color:red;
.div1-1
background-color:yellow;
.div1-2
background-color:blue;
saas和less不同于普通css的地方
- 定义变量,可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值;
- 嵌套写法,父子关系一目了然;
- 使用运算符,可以进行样式的计算;
- 内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等;
- 继承:为多个元素定义相同样式的时候,我们可以考虑使用继承的做法;
- Mixins (混入):有点像是函数或者是宏,当某段 CSS经常需要在多个元素中使用时,可以为这些共用的 CSS 定义一个Mixin,然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。
结束
如果文章对你有帮助,麻烦点赞哦!一起走码农花路~