zoukankan      html  css  js  c++  java
  • CSS之 sass、less、stylus 预处理器的使用方式

    更详细区别参考文档:https://blog.csdn.net/pedrojuliet/article/details/72887490

    使用变量:

      sass:  使用 $ 符号定义变量,如: $base_color: #efefef

       less: 使用 @ 符号定义变量,如:@base_font_size: 16px

      stylus: 对变量没有任何设定(变量不能以@符号开头),变量之间可以使用 “=”, “空格”或者 “:”,如:  base_font_color: red,   borderwidth=1px,  borderColor #cacaca

    导入操作(@import):

      如:

    base  css文件
    /* file.{type} */
    body {
      background: #000;
    }
    
    
    xxx css文件
    @ import "1.css";
    @ import "file.{type}";
    p {
      background: #092873;
    }
    
    
    结果
    @ import "1.css";
    body {
      background: #000;
    }
    p {
      background: #092873;
    }

    继承:当我们需要为多个元素定义相同的样式的时候,我们可以考虑使用继承的做法

      sass继承:通过 @extend来实现代码组合声明(stylus也可以使用此方法实现继承)

    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;  
    }
    
    .err {
      @extend .message;
      border-color: red;
    }

      less继承

    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    .success {
      .message;
      border-color: green;
    }
    .error {
      .message;
      border-color: red;
    }

    混入(Mixins):有点像函数或者宏,当某段css经常要在多个元素中使用时,可以为这些共用的css定义一个Mixin,然后在需要的地方引入该Mixin即可

      sass语法:

    /* 定义一个混入语法,接受一个变量,默认值为2px,可选 */
    @mixin err($borderWidth:2px){
        border:$borderWidth solid #cacaca
        color: #cacaca
    }
    
    .generic-error {
        padding: 20px;
        margin: 4px;
        @include error(5px);  /* 调用混入语法,传入一个参数得到 border:5px solid #cacaca*/
    }

      stylus语法

    error(borderWidth= 2px) {
      border: borderWidth solid #F00;
      color: #F00;
    }
    .generic-error {
      padding: 20px;
      margin: 4px;/* 调用混入语法,传入一个参数得到 border:5px solid #cacaca*/、
    error();
    }

      

    怎能让着不停燃烧的心,就这样耗尽消失在平庸里

  • 相关阅读:
    Flutter 布局类组件:简介
    Flutter 基础组件:进度指示器
    Flutter 基础组件:单选框和复选框
    Flutter 基础组件:图片和Icon
    Flutter 基础组件:按钮
    Flutter 基础组件:文本、字体样式
    Flutter 基础组件:状态管理
    Flutter 基础组件:Widget简介
    网络编程之TCP
    入门多线程
  • 原文地址:https://www.cnblogs.com/jingxuan-li/p/11828783.html
Copyright © 2011-2022 走看看