• [学习记录]简明扼要的Sass


    Sass是一种css辅助工具,允许开发人员更加“优雅”地编写css,最后由程序将程序员写好的sass“编译”成标准css

    sass基于ruby,因此要先安装ruby,然后命令行下运行

    gem install sass进行安装

    sass可以监视sass文件,当sass文件修改并保存时自动编译

    sass input.scss  output.css       进行单一文件转换

    sass --watch input.scss:output.css       监视单个文件

    sass --watch app/sass:public/stylesheets      监视文件夹

    sass官方中文文档

    -------------------------------------------------------------------------------------

    sass拓展的功能

    1.嵌套规则:

    允许将一个CSS样式直接嵌入进另一个样式中,自动处理父子关系

    2.父选择器&:

    例如a:hover这种选择器时可以直接在a的样式内部使用&:hover的方式进行编写,&其实直接被替换成了a(因此可以加后缀)

    3.属性嵌套

    说的就是font,background这种家族众多的属性,可以用一个大括号直接写在一起

    4.定义变量

    $   ,可以直接调用,默认情况下变量仅支持块作用域,也可以在变量后增加!global声明让它变成全局变量

    5.条件语句

    @if   条件    {输出内容}     会根据条件状况判断是否输出,可以接    @else if和  @else

    6.循环语句

    @for   和   @each   和  @while    用来循环为某组名称相近的样式修改属性

  • 相关阅读:
    【结构型】Proxy模式
    【结构型】Flyweight模式
    【结构型】Facade模式
    【结构型】Decorate模式
    【结构型】Composite模式
    适配器模式 -- 大话设计模式
    状态模式 -- 大话设计模式
    抽象工厂模式 -- 大话设计模式
    建造者模式 -- 大话设计模式
    观察者模式 -- 大话设计模式
  • 原文地址:https://www.cnblogs.com/trickofjoker/p/11038256.html
Copyright © 2020-2023  润新知