zoukankan      html  css  js  c++  java
  • scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与less正好为css提供这些,让css可以像编程一样灵活书写样式,而且scss与还提供了一些css兼容性的处理,所以运用scss就不需要像写css时队友的语法需要做hack处理。SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。

    2.本文我们只对scss介绍,其实less都差不多,当你使用scss语法是要用.scss后缀,使用sass语法时用.sass后缀。
    3.在vue项目中的使用:

    •      安装:在命令行中输入:npm install node-sass sass-loader --save-dev
    •      在样式中声明使用scss:<style lang=scss scoped><style>(到这里就可以愉快的使用scss语法了)
    •      注:在webpack.config.js中不需要配置使用sass-loader,因为vue-loader会自动解析

    4. scss常用语法简介:

    1.自定义变量以及子元素书写:

    <style lang=scss scoped>
    /*scss的使用:*/
    /*1.自定义变量*/
    $color:pink; 
    $200px;
    $height:200px;
    $right:right;
    $num:2;
    .test{
        background:$color;
        $width;
        height:$height;
        margin:30px auto;
        /*插入变量*/
        border-#{$right}:2px solid blue;
        /*子元素的书写 选择器嵌套*/
        p{
            color:orange;
            font-size: 30px;
        }
    }

    2.样式的加减乘除以及继承样式:

    .p{
        background:yellowgreen;
    }
    .test2{
        /*样式的加减乘除,自定义变量再使用*/
        $num*100px;
        height:$num*50px;
        border:(1px+1px) solid orange;
        /*样式的继承*/
        @extend .p;
    }

    3.样式的复用:

    /*代码的复用,相当于自定义一个函数,并且可以 传参*/
    @mixin box($height){
        height:$height;
        200px;
        border:1px solid deeppink;
    }
    .test3{
        /*调用*/
        @include box(200px);
    }

    4.使用if语句:

    /*使用if语句判断使用哪套样式,lightness是scss中的一个函数,用来判断色彩度,$color为传入的自定义参数*/
    .test4{
        @if lightness($color)<30%{
            50px;
            height:50px;
            background:cyan;
        }@else{
            50px;
            height:50px;
            background:yellow;
        }
    }

    5.scss的三种循环:for   while   each:

    /*循环语法,包括最常见的三种循环方法,for,while,each,*/
    /*其中循环包含开始不包含结束量,如下不包含5*/
    @for $i from 1 to 5{
        .R#{$i}{
            $i*20px;
            height:$i*20px;
            /*注意:变量带单位时不能写成($i)px;应该写:#{$i}px*/
            border:#{$i}px solid olive;
        }
    }

    6.scss中的函数:

    /*函数使用*/
    @function double ($num){
        @return $num*2
    }
    .test5{
        font-size: double(20px);
        color:gold;
    }
  • 相关阅读:
    7月15日考试 题解(链表+状压DP+思维题)
    暑假集训日记
    C# .NET 使用 NPOI 生成 .xlsx 格式 Excel
    JavaSE 基础 第42节 局部内部类
    JavaSE 基础 第41节 匿名内部类
    JavaSE 基础 第40节 内部类概述
    JavaSE 基础 第39节 接口的应用
    JavaSE 基础 第38节 接口的实现
    JavaSE 基础 第37节 接口概述
    JavaSE 基础 第36节 抽象类概述与使用
  • 原文地址:https://www.cnblogs.com/ysx215/p/10769195.html
Copyright © 2011-2022 走看看