scss的常规用法

公司的项目做了有一段时间了，由于之前对scss的了解比较少项目中用到的scss相关的东西只有scss的嵌套如下

.body{
  width: 200px;
  .item{
    width: 100px;
  }
}

现在项目做了有一段时间了，决定好好的研究一下scss这个css预处理器。

项目用的是vue框架。

scss安装（npm）

npm install --save-dev sass-loader
npm install --save-dev node-sass

配置

安装rudy（自己去百度很多的）
在webstorm配置
       文件-设置-工具-file watchers
           program：scss
           arguments：--no-cache --update $FileName$:$FileNameWithoutExtension$.css
           output paths to refresh：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
这样写完scss文件后保存就会在这个文件下生成css文件

在.vue文件的style标签中写入scss的语法标准就能开始scss了

lang="scss"

设置全局变量

//设置全局变量
$width: 200px;
$background: red;
$height: 100px;
$small_width: 100px;
$small_height: 50px;
$small_background: blue;

引用

width: $width;
height: $height;
background: $background;

这个用法还是挺方便的，可以使页面的一些基础样式统一

scss继承@extend

先写好一个我们比较常用的样式

.center_middle{
  display: flex;
  justify-content: center;
  align-items: center;
}

要使用的时候直接调用

@extend .center_middle;//继承的用法

但是如果我们写好了常用的样式却没有用到为了防止样式编译我们可以使用%占位符

%margin{
  margin-right: 100px;
}

占位符的调用

@extend %margin;//占位符的调用方式

scss的宏和@include

@mixin关键字宏相当于js中封装的函数，它可以传入多个参数（也可以不传）

传参数：括号中的10px是默认传入的参数

@mixin border-radius($radius: 10px){
  border: $radius solid black;
}

不传参数：

@mixin border-radius(){
  border: 1px solid black;
}

宏的引用

@include border-radius(4px);//宏的引用方法  ( 宏和@include )

scss伪类和&符号

项目中有碰到一些当元素被激活后样式需要变化的情况可以用&符号选中当前父元素，然后进行&：hover或其它的操作这样就可以减少js的代码将样式的改变交给css，提高程序的性能

&:after{
  content: '1';
}
&:before{
  content: '2';
}
&:active{
  color: white;
}
&:focus{
  color: yellow;
}
&:hover{
  color: green;
}

以上是一些我认为项目中比较有可能用到的scss技巧

启发

基于以上这些scss使用的技巧

我们可以把一些常用的css代码直接封装在一个常用的scss文件里面然后在项目中引入这个scss文件，然后直接调用这样可以省去大量的css代码提高建立页面的速度

@import "../assets/baseScss";//引用封装好的公共样式

这是临时想到的一些常用的css样式：

//display上下左右区中
.center-middle{
  display: flex;
  justify-content: center;
  align-items: center;
}
//display上下居中
.middle{
  display: flex;
  align-items: center;
}
//display左右居中
.center{
  display: flex;
  justify-content: center;
}
//border边框线
@mixin border($border:1px,$border-color:block){
  border: $border solid $border-color;
}
//border-radius圆角
@mixin radius($radius){
  border-radius: $radius;
}

猜你喜欢