zoukankan      html  css  js  c++  java
  • sass中文注释的解决方法和一些简单用法

    最近用sass来编写项目中的css,发现不能添加中文注释,报错如下

    于是查阅了一下发现需要在scss文件顶部加上@charset "utf-8"即可解决。

    在此顺便记录一些sass的常用技巧。

    注释:

     /* 我是注释 */    ,会保留到编译后的文件。
    // 我是注释   ,只保留在SASS源文件中,编译后被省略。
    

     /*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

    /*! 
        我是重要注释!
      */
    

    变量:

    $w : 1000px;
    $b-w : 10px;
    
    ul{
         $w/2;
        border- $b-w;
    }

     在解析后的css文件中代码显示为

    ul {
       500px;
      border- 10px;
    }
    

    @mixin命令:

    @mixin left($m-l:10px,$m-r:20px){   //类似于函数声明一样,用@mixin来定义一个left,括号中内容及括号可不填,根据需求来
        float: left;
        margin-left: $m-l;
        margin-right: $m-r;
    }
    
    li{
             200px;
            height: 50px;
            @include left(50px,100px); //用@include来引入,其中left中可传入变量的值,不写的话即为默认10px,20px
    }
    

     解析后的css

    li {
       200px;
      height: 50px;
      float: left;
      margin-left: 50px;
      margin-right: 100px;
    }
    

     

    继承:

    .box1{
        border: 1px solid #FF0000;
        background: blue;
    }
    
    .box2{
        @extend .box1; //继承box1的属性
         200px;
        height: 200px;
    }
    

     解析后的css

    .box1, .box2 {
      border: 1px solid #FF0000;
      background: blue;
    }
    
    .box2 {               ////box2的额外属性会单独写出
       200px;
      height: 200px;
    }
    //继承主要用于精简css的代码
    

      

    一些其他的简单写法

    //scss代码
    .contain{
        h1,h2,h3{
            background: red;
        }
    }
    
    ul{
        background: {
            color: #ccc;
            image:url("img/1.jpg");
            repeat:no-repeat;
        }
    }
    
    //解析后的css代码
    .contain h1, .contain h2, .contain h3 {
      background: red;
    }
    
    ul{
        background-color: #ccc;
        background-image: url("img/1.jpg");
        background-repeat: no-repeat;
    }
    

      

  • 相关阅读:
    C# 了解当前使用的语言版本
    Swagger api 接口管理 使用总结
    Git 常见错误操作
    NestJs 详解
    推荐一个NodeJS 框架 AdonisJS
    Lavavel8.x
    @typegoose/typegoose. 使用技巧
    Typeorm
    Cocos2Dx(4)——动画
    Java程序员的C#学习笔记(1) C#和.NET Framework概览
  • 原文地址:https://www.cnblogs.com/Code-Inconnu/p/7646327.html
Copyright © 2011-2022 走看看