精华内容
下载资源
问答
  • scss用法

    千次阅读 2018-04-23 13:09:40
    在项目中使用scss1.vue项目中使用npm引入scssnpm install --save-dev sass-loader //安装scss支持npm install --save-dev node-sassbuild/webpack.base.conf.js中加入:{ test: /.s[a|c]ss$/, loaders: ['style',...

    在项目中使用scss

    1.vue项目中使用npm引入scss

    npm install --save-dev sass-loader  //安装scss支持

    npm install --save-dev node-sass

    build/webpack.base.conf.js中加入:

    {

        test: /.s[a|c]ss$/,

        loaders: ['style', 'css', 'sass'

    }

    .vue文件中的style标签加入lang="scss"(仍旧支持css语法)

    2.把scss引入到html中

    用koala把自己编写的scss文件编译成css,然后再在自己的html文件中引入该.css文件就可以了


    scss基础语法

    • 变量(局部/全局)声明:$+变量名:变量值;默认变量在变量名后加default,!global变成全局变量。
    • 混合宏(可重用的代码块):声明混合宏@mixin border-radius { }; 调用混合宏 @include。 border-radius; 声明的时候还可以带默认参数,调用可以传参。
    • 继承: @extend .btn; 继承btn class。任何选择器都能继承,可以连续继承。
    • 占位符%:占位符声明的代码如果不被@extend调用,就不会被编译产生css代码。
    • 插值:#{$参数名},插入传入或定义的参数。
    • 注释:/* */ :会在编译出来的css文件中显示;//内容:不会显示。/!/:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息。
    • 加减法:同单位的数值之间可以做加减法。
    • 乘除法:只能乘数值;如果除式中没有变量或者不是在一个数学表达式中(有加法减法等),就要将除式运算用小括号括起来,否则“/”不会被当做除号运算。
    • 颜色运算:算术运算都支持颜色值,并且是分段计算的,01+05=06
    • 字符串连接:+,$content: "Hello" + "" + "Sass!";cursor: e + -resize;有引号的字符串和没有引号的字符串相加,以左边字符有无引号为准。
    • 父类选择器:&,表示引用父元素,
    • if语法:@if,@else,
    • 循环语法:@for,@while,@each,
    • 函数:@function double ($number){ @return $number*2; }
    • import:导入其他的scss
    展开全文
  • scss 用法的准备工作,下载 考拉 编译工具 且目录的名字一定不能出现中文,哪里都不能出现中文,否则就会报错  es6 用法  let 和 const   let 声明变量的方式 在 {} 代码块里面才有效;且在相同的代码块,...

      scss 用法的准备工作,下载 考拉 编译工具  且目录的名字一定不能出现中文,哪里都不能出现中文,否则就会报错

      es6 用法

      let 和 const   

       let   声明变量的方式  在 {} 代码块里面才有效;且在相同的代码块,不能声明两个相同的变量名,一旦出了这个{} 代码块 ,此变量无效

      const  声明常量的方式  声明完毕后,我们不能轻易的更改声明的常量,(但不代表我们不能更改,只是更改,还不如不用他声明)

      字符串介绍:

        传统的字符串拼接的方式,麻烦且容易出错,所以我们的 es6 提供了一种新的 字符串拼接的方式 ``

        虽然这种写法,确实要比传统的写法高明了许多,但是还是有很多想吐槽的点;

          这种写法在字符串里面并不支持 js 语法了,也就是我们并不能进行 for 循环 和 条件判断,使得我们又不得不为此做出很多的处理

        但是,比起传统的写法高明了很多,例如,我们使用字符串拼接的话,显得美观又漂亮

      用法:我们使用英文下的反引号来代替我们之前的双引或单引 `` (键盘 tab 上面的键)

        案例:let a="world";

             let b=`hello ${a}`;

            console.log(b)  // hello world   最终的打印结果

      如果我们非要用 字符串拼接的方式来进行页面的渲染,也不是不可能,我们可以使用函数的方式来解决;

        案例:function fn(a){

              var st=  ` <div> ${a} </div> `;

              return st;   

           }

           var mt=` <div>${fn("hello")}</div> `;

           这样的话 我们 的 mt 变成了 这种结构

            <div>

              <div> hello </div>

            </div> 

      模块化:

        common 是 nodejs 的模块化规范

        amd     是 requirejs 的模块化规范

        cmd     是 seajs 的模块化规范

        而我们的 es6 也提供了我们的模块化规范

        浏览器对于 type="module" 都是异步加载的;

          模块加载一遍,就不加载了,会从内存中直接读取

          开发思路:我们可以把所有的特效 分成不同的 js 文件,最后都放在一个 js 文件里面

     

        es6 模块化的用法

          export 向外暴露 变量 或 方法

          如果有多个暴露的 变量 和 方法 ,我们使用 逗号 隔开

          案例:01.js文件

            let a="hello";

            let b="world";

            export {a,b}

          import 接收外面暴露的变量 和 方法 

          案例:

            像 jQuery 这种 插件我们 就可以不使用 export 向外暴露 变量 和方法 , 直接引入即可

            import "jQuery.js";

            像 在 01.js 中,我们有暴露的 变量 和 方法,我们就要使用 es6 语法了

            import {a,b} from "01.js";

          如果在 页面中 引入 模块的内容;我们只能这么写 

          案例:

            <script type="module" src="01.js">

              import {a} from "01.js"  //我们如果只想使用一个变量,那么引入一个就好了;

              console.log(a)  // hello 

            </script>

        注意事项:

          不管是导出,还是引入,我们都需要 用 {} 将变量 和 方法 括起来 传递出去;

          记住,每个 js 文件,或者在 页面中 <script> 中的语法,一旦使用 模块化开发,使用任何东西前,先看有没有引入,有没有暴露变量 和 方法 ,不然就会报错

        script 标签的属性,defer  和  async 都是异步执行的;

          defer 等页面渲染完,才执行

          async 下载完毕就执行,

      函数:

        ...变量名  由...加上一个具体名称的参数标识符组成,不定参数用来标识,不确定的参数

        function fn(...value){

          console.log(value)  //打印的结果为 1,2,3

        }

        fn(1,2,3)

      箭头函数:=> 提供了一种更加简洁的函数书写方式

      基本语法:参数=>函数体

        var f=v=>v  //箭头后面只跟语句的话,代表 return 这条语句

        等价于 function f(v){

             return v

           }

        var f=(a,b)=>a+b  //箭头后面只跟了语句的话,代表return 这条语句

        var b=f(1,2);

        console.log(b)  //3

      总结:当箭头函数没有参数或者多个参数的话,我们应该用 () 来括起来,代码书写的安全模式;

          指的是形参的写法:不管参数有没有,都需要用 () 括起来,如果使用箭头函数的话,

          多行语句:用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {},结果会自动返回

       当箭头函数要返回对象的时候,为了区分代码块,要用 () 将对象包裹起来

      案例:

        var f=(id,name)=>({id:id,name:name})

        f(6,2)  //id=6,name=2;

      关于 this 指向问题

        函数体里面的 this 跟谁调用有关,谁调用这个函数,this就指向谁,在定时器中 this 通常指向 window,但是通过 => this 便可以指向函数内的 this

      声明 类 class 

      class father{

        //这个类里面的内容,讲道理构造器好一点

      }

      属性的写法

      a="hello 我是类的属性"

      里面有一个 constructor 的方法,当 new 实例化对象的时候,这个方法就会执行

      方法的写法

      fn(){

        //方法的内容

      }

      实例化对象

      let a=new father()  // 注意:实例的时候,还是需要用 new

      类的继承

      class son extends father{

        //这里面书写了子类的属性和方法

      }

      let b=new son()

      这个 b 的实例种功能,便拥有了 father 的属性和方法,也拥有自己的属性和方法

      less 用法:

      引用 less

      第一步:下载 less.js 插件

      第二步:写以 .less 为后缀的文件

      第三部:引入 less 文件的方式:

      在 head 中加入 <link rel="stylesheet/" type="text/less" href="01.less">

      引入 js 文件 <script src="less.js"></script>

      less 是一门 css 的预处理语言

      变量:这些变量都是不言自明的;

      @nice-blue:#5b83ad  //利用 @ 定义常量

      #header{

        color:@nice-blue;  // 引用常量

      }

      <div id="header">

        <div class="navigation"></div>

        <div class="logo"></div>

      </div>

      less 样式写法

      嵌套规则:

        #header{

          color:black;

          .navigation{

            font-size:12px;

          }

          .logo{

            width:300px;

          }

        }

      用 & 操作符 在那个代码块下,& 就代表了谁

      作用域:一个 {} 代表一个作用域,凡是在作用域里面定义的常量,便可使用,否则不可以

     

      sass 用法

      scss 是 sass 的升级版,拥有了很多强大的功能,因为 scss 包括了 sass 的功能,所以就只说 scss 用法

      scss 是一个成熟,稳定,强大的 css 预处理器,scss 是 sass3版,引入了新的语法特性

      变量:$变量名:属性值

      嵌套:

        div{

          p{

          }

        }

      引入:@import "scss文件";

      混合:通过 mixin 来分组那些需要在页面中复用的 css 声明

      关键字:@mixin           include

      案例:

      声明

      @mixin border-radius($radius){

        border-radius:$radius;

        -ms-border-radius:$radius;

        -moz-border-radius:$radius;

        -webkit-border-radius:$radius;

      }  

      .box{

        引用

        @include border-radius(10px);

      }

      继承:

      通过 % 变量名 声明

      %message-common{

        border:1px solid #ccc;

        padding:10px;

        color:#333;

      }

      .box{

        引用

        @extend %message-common;

        border-color:red;  //也可以更改里面的额属性

      }

      操作符:我们可以进行 + - * / %;

      width:600px/960px*100%;

      关键字:& 代表父级选择器

      .box{

        & 代表 .box;

      }

      另一种嵌套的属性

      .demo{

        //命令空间后带有冒号

        font:{

          size:30em;

        }

      }

      翻译过来:

      .demo{

        font-size:30em;

      }

    转载于:https://www.cnblogs.com/shangjun6/p/11068014.html

    展开全文
  • scss用法整理

    千次阅读 2019-06-24 14:25:14
    刚刚开始学习前端,以为学会了css就掌握了前端的半壁江山,直到朋友说我他们现在基本上都用SCSS啦,今天学习了下也做个总结方便以后回顾(毕竟年纪大了哈哈哈) 首先要了解下SCSS的由来,因为有个叫Sass...

        刚刚开始学习前端,以为学会了css就掌握了前端的半壁江山,直到朋友说我他们现在基本上都用SCSS啦,今天学习了下也做个总结方便以后回顾(毕竟年纪大了哈哈哈)

    首先要了解下SCSS的由来,因为有个叫Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数,以加强和提升CSS. 它有很多很好的特性,但是它有类似Ruby的语法,没有花括号,没有分号,遵循严格的缩进,所以为了融合他们的优点SCSS就出现了,SCSS使得css性能更好定义更加简洁和灵活,下面我们了解下吧

    • 第一个特性:嵌套,可以在父节点的样式定定义中嵌套子节点的样式定义,这样将父节点和子节点就可以放到一起,算是一个整合吧,感觉找起来也比较方便,另一方面感觉查找的更便捷了,因为分开定义会查找好几次父节点,现在是只查询一次父节点就可以找到父节点的其他子节点了

           代码案例(自己体会下哦)

            

    • 第二个特性:自定义变量,将多次复用的值存储在一个变量中,这样我们在定义样式的之后直接调用变量就可以啦这样一个变量就可以用在相同样式的节点中,之定义一遍样式,这样显然减少了样式的大小肯定会加快下载速度的,让代码更性变了

         语法:$变量名:属性值(样式代码块中直接引用"$变量名"字就可以啦)

         

    • 第三个特性:引入,将网页切分成片段后,给每个片段单独定义样式,让页面的布局更有独立性,打个比方一个系统中我们的导航栏侧栏都是一样的所以我们单独定义这两个部分的样式,

         语法:@import "css文件名(不需要带后缀)"

         @import引入外部的css样式,可以在CSS文档和HTML标签<style>中进行引用

          还可以通过@import将所有的css文件集合到一个文档中完后用gulp命令来生成最后的style.css文件完后通过

          

    • 第四个特性:混合(Mixin),将样式参数值一样的样式进行封装,一般用的比较多的就是浏览器的兼容属性,

         语法:使用@mixin 样式属性名称($变量名)来声明,完后用@include 样式属性名称(实际参数)看下面的例子

           

    • 第五个属性:继承,如果A元素继承B标签的边框属性,那么A和B的边框样式就是一样的

        语法:@extend 选择器的名称(比如.test类选择器反正是已设置过的属性)

        

    展开全文
  • SCSS用法总结

    千次阅读 2018-09-09 16:20:20
    一. 概述: - 完全兼容 CSS3 - 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能 - 通过函数进行颜色值与属性值的运算 - 提供控制指令 ...sass input.scss output.css 监视单个 Sass 文件,每次...

    一. 概述:

    - 完全兼容 CSS3
    - 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
    - 通过函数进行颜色值与属性值的运算
    - 提供控制指令 (control directives)等高级功能
    - 自定义输出格式
    

    二.命令行处理

    • 在命令行中运行 Sass:

      sass input.scss output.css

    • 监视单个 Sass 文件,每次修改并保存时自动编译:

      sass –watch input.scss:output.css

    • 监视整个文件夹:

      sass –watch app/sass:public/stylesheets

    三.嵌套规则

    • 层级嵌套
      main {
      width: 97%;

      p, div {
      font-size: 2em;
      a { font-weight: bold; }
      }

      pre { font-size: 3em; }
      }

    • 父选择器 &
      a {
      font-weight: bold;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      body.firefox & { font-weight: normal; }
      }

      main {
      color: black;
      &-sidebar { border: 1px solid; }
      }

    • 属性嵌套
      .funky {
      font: 20px/24px {
      family: fantasy;
      weight: bold;
      }
      }

    四 插值语句 #{}

    $name: foo;
    $attr: border;
    p.#{$name} {
      #{$attr}-color: blue;
    }
    
    p {
      $font-size: 12px;
      $line-height: 30px;
      font: #{$font-size}/#{$line-height};
    }
    
    .foo.bar .baz.bang, .bip.qux {
      $selector: &;
    }

    五.@import

    @import “foo.css”;
    @import “foo” screen;
    @import “http://foo.com/bar“;
    @import url(foo);

    六.media

    .sidebar {
      width: 300px;
      @media screen and (orientation: landscape) {
        width: 500px;
      }
    }
    
    编译为
    
    .sidebar {
      width: 300px; }
      @media screen and (orientation: landscape) {
        .sidebar {
          width: 500px; } }
    

    七.@extend

    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }

    八@at-root

    .parent {
      ...
      @at-root {
        .child1 { ... }
        .child2 { ... }
      }
      .step-child { ... }
    }
    
    Which would output the following:
    
    .parent { ... }
    .child1 { ... }
    .child2 { ... }
    .parent .step-child { ... }
    

    九.指令

    1.@if
    p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
    @if null { border: 3px double; }
    }

    2.@for

    @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }

    3.@each

    @each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
      }
    }
    
    复杂的: 
    @each $animal, $color, $cursor in (puma, black, default),
                                      (sea-slug, blue, pointer),
                                      (egret, white, move) {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
      }
    }

    4.@while

    $i: 6;
    @while $i > 0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }

    5.@mixin

    @mixin large-text {
      font: {
        family: Arial;
        size: 20px;
        weight: bold;
      }
      color: #ff0000;
    }
    
    .page-title {
      @include large-text;
      padding: 4px;
      margin-top: 10px;
    }
    ---------------------------------------------------------------------
    @mixin sexy-border($color, $width) {
      border: {
        color: $color;
        width: $width;
        style: dashed;
      }
    }
    p { @include sexy-border(blue, 1in); }
    
    -----------------------------------------------------------------------
    向混合样式中导入内容
    @mixin apply-to-ie6-only {
      * html {
        @content;
      }
    }
    @include apply-to-ie6-only {
      #logo {
        background-image: url(/logo.gif);
      }
    }
    
    编译为
    
    * html #logo {
      background-image: url(/logo.gif);
    }
    
    
    

    6.函数指令

    $grid-width: 40px;
    $gutter-width: 10px;
    
    @function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
    }
    
    #sidebar { width: grid-width(5); }

    10.变量相关

    $width: 5em;

    1. 数据类型

      数字,1, 2, 13, 10px
      字符串,有引号字符串与无引号字符串,”foo”, ‘bar’, baz
      颜色,blue, #04a3f9, rgba(255,0,0,0.5)
      布尔型,true, false
      空值,null
      数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
      maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)

    2. 运算

      符号: + - * / % == != > >= < <=

    3. 颜色值运算
      p {
      color: #010203 + #040506;
      }

      计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09,然后编译为

      p {
      color: #050709;
      }

      11. 函数

      1.RGB Functions

      rgb(red,green, $blue) : Creates a Color from red, green, and blue

      values.

      rgba(red,green, blue,alpha) : Creates a Color from red,
      green, blue, and

      alpha values.

      red($color) : Gets the red component of a color.

      green($color) : Gets the green component of a color.

      blue($color) : Gets the blue component of a color.

      mix(color1,color2, [$weight]) : Mixes two colors together.


    2 HSL Functions

    hsl($hue, $saturation, $lightness) : Creates a Color from hue,
    saturation, and
    
    lightness values.
    
    hsla($hue, $saturation, $lightness, $alpha) : Creates a Color from
    hue, saturation,
    
    lightness, and alpha values.
    
    hue($color) : Gets the hue component of a color.
    
    saturation($color) : Gets the saturation component of a color.
    
    lightness($color) : Gets the lightness component of a color.
    
    adjust-hue($color, $degrees) : Changes the hue of a color.
    
    lighten($color, $amount) : Makes a color lighter.
    
    darken($color, $amount) : Makes a color darker.
    
    saturate($color, $amount) : Makes a color more saturated.
    
    desaturate($color, $amount) : Makes a color less saturated.
    
    grayscale($color) : Converts a color to grayscale.
    
    complement($color) : Returns the complement of a color.
    
    invert($color, [$weight]) : Returns the inverse of a color.
    

    3 Opacity Functions
    alpha(color)/opacity(color) : Gets the alpha component (opacity) of a color.

    rgba(color,alpha) : Changes the alpha component for a color.

    opacify(color,amount) / fade-in(color,amount) : Makes a color more opaque.

    transparentize(color,amount) / fade-out(color,amount) : Makes a color more transparent.


    4 Other Color Functions
    adjust-color(color,[red], [green],[blue], [hue],[saturation], [lightness],[alpha]) : Increases or decreases one or more components of a color.

    scale-color(color,[red], [green],[blue], [saturation],[lightness], [$alpha]) : Fluidly scales one or more properties of a color.

    change-color(color,[red], [green],[blue], [hue],[saturation], [lightness],[alpha]) : Changes one or more properties of a color.

    ie-hex-str($color) : Converts a color into the format understood by IE filters.


    5 String Functions
    unquote($string) : Removes quotes from a string.

    quote($string) : Adds quotes to a string.

    str-length($string) : Returns the number of characters in a string.

    str-insert(string,insert, $index) : Inserts $insert into $string at $index.

    str-index(string,substring) : Returns the index of the first occurrence of $substring in $string.

    str-slice(string,start-at, [$end-at]) : Extracts a substring from $string.

    to-upper-case($string) : Converts a string to upper case.

    to-lower-case($string) : Converts a string to lower case.


    6 Number Functions
    percentage($number) : Converts a unitless number to a percentage.

    round($number) : Rounds a number to the nearest whole number.

    ceil($number) : Rounds a number up to the next whole number.

    floor($number) : Rounds a number down to the previous whole number.

    abs($number) : Returns the absolute value of a number.

    min($numbers…) : Finds the minimum of several numbers.

    max($numbers…) : Finds the maximum of several numbers.

    random() : Returns a random number.


    7 List Functions
    length($list) : Returns the length of a list.

    nth(list,n) : Returns a specific item in a list.

    set-nth(list,n, $value) : Replaces the nth item in a list.

    join(list1,list2, [separator,bracketed]) : Joins together two lists into one.

    append(list1,val, [$separator]) : Appends a single value onto the end of a list.

    zip($lists…) : Combines several lists into a single multidimensional list.

    index(list,value) : Returns the position of a value within a list.

    list-separator($list) : Returns the separator of a list.

    is-bracketed($list) : Returns whether a list has square brackets.


    8 Map Functions
    map-get(map,key) : Returns the value in a map associated with a given key.

    map-merge(map1,map2) : Merges two maps together into a new map.

    map-remove(map,keys…) : Returns a new map with keys removed.

    map-keys($map) : Returns a list of all keys in a map.

    map-values($map) : Returns a list of all values in a map.

    map-has-key(map,key) : Returns whether a map has a value associated with a given key.

    keywords($args) : Returns the keywords passed to a function that takes variable arguments.


    9 Selector Functions
    selector-nest($selectors…) : Nests selector beneath one another like they would be nested in the

    stylesheet.

    selector-append($selectors…) : Appends selectors to one another without spaces in between.

    selector-extend(selector,extendee, $extender) : Extends $extendee with $extender within $selector.

    selector-replace(selector,original, $replacement) : Replaces $original with $replacement within $selector.

    selector-unify(selector1,selector2) : Unifies two selectors to produce a selector that matches

    elements matched by both.

    is-superselector(super,sub) : Returns whether $super matches all the elements $sub does, and

    possibly more.

    simple-selectors($selector) : Returns the simple selectors that comprise a compound selector.

    selector-parse($selector) : Parses a selector into the format returned by &.


    10 Introspection Functions

    feature-exists($feature) : Returns whether a feature exists in the current Sass runtime.

    variable-exists($name) : Returns whether a variable with the given name exists in the current scope.

    global-variable-exists($name) : Returns whether a variable with the given name exists in the global scope.

    function-exists($name) : Returns whether a function with the given name exists.

    mixin-exists($name) : Returns whether a mixin with the given name exists.

    content-exists() : Returns whether the current mixin was passed a content block.

    inspect($value) : Returns the string representation of a value as it would be represented in Sass.

    type-of($value) : Returns the type of a value.

    unit($number) : Returns the unit(s) associated with a number.

    unitless($number) : Returns whether a number has units.

    comparable(number1,number2) : Returns whether two numbers can be added, subtracted, or compared.

    call(function,args…) : Dynamically calls a Sass function reference returned by get-function.

    get-function(name,css: false) : Looks up a function with the given name in the current lexical scope

    and returns a reference to it.


    展开全文
  • vue中scss用法

    千次阅读 2018-09-06 16:27:42
    如何学习Scss学习Scss的第一步不是你要知道什么是Scss的概念啊什么的,而是找到一个合适的资源从头开始学习,我在这里推荐慕课网的资源Sass入门篇,还有Sass进阶篇,sass中文官网大家学习完以后,基本上就什么会了。...
  • scss用法最全简述

    2020-06-01 09:34:47
    SCSS 是以“.scss”后缀为扩展名 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(,而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 //scss代码 .a { color: blue; font-...
  • SASS用法指南 作者:阮一峰 日期:2012年6月19日 学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在...
  • Scss基础用法

    2019-10-25 00:00:44
    Scss基础用法 一、注释用法: (1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有。 (2)/!/:重要注释,任何style的css文件中都会有,一般放置cs...
  • scss 基本用法

    2020-12-07 14:29:23
    1.sass和scss的关系 sass和scss其实是一样的css预处理语言,SCSS 是 Sass 3 引入新的语法,其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀...2.用法 2.1注释 多行注释-这些使用/**/写入。多行注...
  • SCSS 日常用法

    2019-11-22 10:49:07
    SCSS 日常用法 本文是以自己的理解起的结构,要看详细的帮助文档,参阅这里:https://sass-lang.com/documentation/ 你需要了解的 less 和 sass 是两种 css 预编译语言,就是说通过 less 或者 scss 写的代码...
  • scss常见用法

    万次阅读 2017-11-17 16:30:01
    Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为...
  • scss基础用法

    2020-12-30 11:05:24
    安装 ​npm install node-sass --save-dev //安装node-sass npm install sass-loader@7.3.1 --save-dev //安装sass-loader npm install style-loader --save-dev //...像 js 的变量一样,scss 的变量也是有作用域的
  • SCSS基础用法

    千次阅读 2018-06-05 15:36:25
    1. CSS预处理器定义了一种新的专门的编程语言,编译后成正常的CSS文件。...2.Sass和SCSS的区别文件扩展名不同:“.sass”和“.scss”;Sass是以严格缩进式语法规则来书写的,不带大括号和分号;而SCSS的...
  • scss基本用法

    2019-01-22 17:58:00
    特别说明:scss函数名中的中划线和下划线是等同的,font-size和font_size指向同一个函数。 1.变量 2.选择器嵌套 3.属性嵌套 规则如下: (1).把属性名从中划线-的地方断开。 (2).在根属性后边添加一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 919
精华内容 367
关键字:

scss用法