????️scss/less基本用法总结

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

npm install less less-loader --save-dev      //less
复制代码

二、修改配置

scss:point_right:在webpack.config.js中不需要配置使用sass-loader，因为vue-loader会自动解析

less:point_right:修改webpack.config.js文件

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader"
          }
        ]
    }
}

复制代码

在创建项目的时候已经配置有的可以省略以上步骤 :ramen:

三、scss部分用法

使用语法

<style lang='scss' scoped><style>   //方法一

@import "./common.scss";         //方法二
复制代码

基本语法scss

• :cherries: 变量 $

$mainRed:#f73c3c;

.component {
  color : $mainRed;
}
复制代码

• :cherries: 嵌套

选择器嵌套
/*===== SCSS =====*/
div{
    p{
    }
}

/*===== CSS =====*/
div{
}  
div p {
}  

&引用父元素。比如a:hover伪类
a {
      &:hover { color: #ffb3ff;}
  }


属性嵌套
/*===== SCSS =====*/
.oneBox {
  font: {  //font
   size: 14px;
   weight: bold;
  }  
}
/*===== CSS =====*/
.oneBox {
     font-size: 14px;
     font-weight: bold;
}
复制代码

上面提到了&引用父元素。&:before或者&::before :point_right:(:befor和::before写法是等效的)

&:before和&::before的区别:

• :befor是CSS2的写法，::before是CSS3的写法

• :before的兼容性要比::before好,不过在H5开发中建议使用::before比较好

:point_right: 伪类对象要配合content属性一起使用

• :cherries: 混合@mixin

使用方法 @include

/*定义一个css样式代码块，表示样式可以复用*/
@mixin left {
  float: left;
  margin-right: 30px;
}
// 使用@include命令，调用@mixin left。
.oneBox {
  @include left;
}


@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}


/*自定义一个函数，传参*/
@mixin box($height){
	height:$height;
	width:400px;
	border:1px solid pink;
}
.one{
	/*调用*/
	@include box(200px);
}

/*传递多个参数，和默认值用法*/
@mixin commonMargin($value1,$value2,$value3:12px){
    display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$value3;
}
.class1{
    font-size:12px;
    @include commonMargin(12px,13px,15px);
}
.class2{
    font-size:12px;
    @include commonMargin(12px,13px);
}

复制代码

:cherries:变量计算

$left:20px;
.div1{
    margin-left:$left+12px;
}

$num:3;
.box4{
    height:(1px+3px);
    right: $num*4;
}
复制代码

:cherries:继承

/*===== SCSS =====*/
h2{    
  border: 5px solid pink;
  border-width: 2px;
}
.box{
  @extend h2;
}

/*===== CSS =====*/
h1,.box{    // css
  border: 5px solid pink;
}
.box{
  border-width: 2px;
}


复制代码

四、less部分用法

:rocket:less中文网

:rocket:less英文网

:cherries:使用语法

<style lang='less' scoped><style>   //方法一

@import "./common.less";         //方法二
复制代码

用 @ 来声明变量

比如 @mainColor:pink

• less中的变量在块级作用域生效

<style scoped lang="less">
@myColor：pink; 
.hello {
  h1 {
    color: @myColor
  }
}
</style>
复制代码

:cherries:基本嵌套

基本嵌套规则
.maxBox{
    color:yellow;
    .inner{
        color:blue;
    }
    &::hover{
        color:pink;
    }
}

等价于
.maxBox{color:yellow}
.maxBox .inner{color:blue}
.maxBox::hover{color:pink}

复制代码

&可以表示平级的选择器，不让其变成子级。

:cherries:混合使用

1、基本用法

.margin{
    margin:0.5px 1px;
}
复制代码

使用less混合功能，仅需在所需要的.class类(.wrapper)中声明.+class类名(.margin)即可直接引用该样式

调用

.wrapper{
    .margin;
    color:24px;
    background-color:#efefef;
}
复制代码

2、带参数使用

封装样式

.margin{
    margin:1px 2px;
}

.box-tab(@bgcolor){
    .margin;
    background:@bgcolor;
}
复制代码

使用

.tab{
    .box-tab(#e6e6e6)
}
复制代码

3、带默认参数使用

.box-tab(@bgcolor:#000){
    .margin;
    background:@bgcolor;
}
复制代码

使用

.tab{
    .box-tab()
}

//等价于
.tab{
    margin:1px 2px;
    background:#000;
}

复制代码

可用于封装各种css图形、垂直居中等等

4、运算

@width：5px;

.wrapper{
    width：(@width-1)*2; //单位只要有一个带即可
}
复制代码

5、less中的@arguments 特殊变量

可以帮你自动填充所有变量

在混合中, @arguments 表示混合传入的所有参数, @arguments 中的多个参数之间,用空格分隔

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  //less
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
  }
.div{
    .box-shadow(2px, 3px);
}
复制代码

.div {                                         //css
  box-shadow: 2px 3px 1px #000;
  -moz-box-shadow: 2px 3px 1px #000;
  -webkit-box-shadow: 2px 3px 1px #000;
}
复制代码

:beers: 注意

/*编译后会被保留*/

//编译后不会被保留