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

栏目: CSS · 发布时间: 4年前

内容简介:scss:point_right:在webpack.config.js中不需要配置使用sass-loader,因为vue-loader会自动解析less:point_right:修改webpack.config.js文件上面提到了&引用父元素。&:before或者&::before :point_right:(:befor和::before写法是等效的)
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: 注意

/*编译后会被保留*/

//编译后不会被保留


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Developing Large Web Applications

Developing Large Web Applications

Kyle Loudon / Yahoo Press / 2010-3-15 / USD 34.99

As web applications grow, so do the challenges. These applications need to live up to demanding performance requirements, and be reliable around the clock every day of the year. And they need to withs......一起来看看 《Developing Large Web Applications》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器