zoukankan      html  css  js  c++  java
  • sass的简介,安装,语法。

    一,sass的简介

    1,Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。

    2,Sass已经经过其核心团队超过8年的精心打造。

    3,有无数的框架使用Sass构建。比如CompassBourbon,和Susy

    二,sass的语法

    1,使用变量

    1. sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。
    2. sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。),比如$highlight-color$sidebar-width。为什么选择$ 符号呢?因为它好认、更具美感,且在CSS中并无他用,不会导致与现存或未来的css语法冲突。

     2,变量声明

    sass变量的声明和css属性的声明很像:

    $nav-color: #F90;
    nav {
      $ 100px;
       $width;
      color: $nav-color;
    }
    
    //编译后
    
    nav {
       100px;
      color: #F90;
    }
    3,变量引用
    $highlight-color: #F90;
    $highlight-border: 1px solid $highlight-color;
    .selected {
      border: $highlight-border;
    }
    
    //编译后
    
    .selected {
      border: 1px solid #F90;
    }

    4,嵌套CSS 规则
    #content {
      article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
      }
      aside { background-color: #EEE }
    }
     /* 编译后 */
    #content article h1 { color: #333 }
    #content article p { margin-bottom: 1.4em }
    #content aside { background-color: #EEE }

    5,父选择器的标识符&

    article a {
      color: blue;
      &:hover { color: red }
    }
     /* 编译后 */
    article a { color: blue }
    article a:hover { color: red }

    sass官方地址:https://www.sass.hk/










    用心做它,真心体会.
  • 相关阅读:
    四则运算2
    四则运算1
    学习进度条
    Mat数据结构
    Markdown语法
    C++继承和派生
    C++智能指针
    clion配置ROS
    视觉十四讲:第六讲_g2o图优化
    视觉十四讲:第六讲_ceres非线性优化
  • 原文地址:https://www.cnblogs.com/maqingyuan/p/8763196.html
Copyright © 2011-2022 走看看