zoukankan      html  css  js  c++  java
  • Bootstrap Sass使用

    简介

    Sass相比Less 功能更加强大 使用起来也相对复杂 同样也可以用koala(见上篇)来编译.

    安装

    Sass是由Ruby编写的 所以想使用Sass必须要先下载Ruby Ruby只是为Sass运行提供支持 不懂Ruby也不碍事

    安装好Ruby之后 再从官网下载Sass 就可以使用了

    Sass用法

    1 变量  Sass通过美元符号使用变量

    //Sass源码
    $highlight-color: #000000;
    .selected {
      border: 1px solid $highlight-color;
    }
    //编译后的CSS
    .selected {
      border: 1px solid #000000; 
    }

    2 嵌套 Sass的嵌套和Less相同 直接写在里面就好了

    3 代码重用 @mixin @include @extend @function @import

     Sass可以用@mixin 来定义代码块 然后用@include 来复用 @mixin同样也支持参数

    //Sass源码
    @mixin border-radius($radius){
      -moz-border-radius:$radius;
      -webkit-border-radius:$radius;
      border-radius:$radius;
    }
    
    button{
      @include border-radius(5px);
    }
    //编译后的CSS
    button {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; 
    }

    Sass可以使用@extend 来继承一个类

    //Sass源码
    .block{
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .block-primary{
      @extend .block;
      color: #00aff0;
    }
    //编译后的CSS
    .block, .block-primary {
      padding: 15px;
      margin-bottom: 15px; 
    }
    
    .block-primary {
      color: #00aff0; 
    }

    Sass 还可以使用@import来导入外部文件  可以使用@function 来定义函数

    4 Sass支持分支和循环@if @else if  @else @for @while

    //Sass源码
    @mixin add-background($color){
      background: $color;
      @if $color==#000000{
        color: #666666;
      }@else {
        color: #ffffff;
      }
    }
    
    .section-primary{
       @include add-background(#ffffff);
    }
    //编译后的CSS
    .section-primary {
      background: #ffffff;
      color: #ffffff; 
    }
  • 相关阅读:
    [DB] 数据库的连接
    JS leetcode 翻转字符串里的单词 题解分析
    JS leetcode 拥有最多糖果的孩子 题解分析,六一快乐。
    JS leetcode 搜索插入位置 题解分析
    JS leetcode 杨辉三角Ⅱ 题解分析
    JS leetcode 寻找数组的中心索引 题解分析
    JS leetcode 移除元素 题解分析
    JS leetcode 最大连续1的个数 题解分析
    JS leetcode 两数之和 II
    JS leetcode 反转字符串 题解分析
  • 原文地址:https://www.cnblogs.com/kkcoolest/p/11681179.html
Copyright © 2011-2022 走看看