sass入门

2019独角兽企业重金招聘Python工程师标准>>>

// .sass文件（使用缩进代替大括号， 使用换行的代替分号）与.scss文件的差异在于语法格式的区别

// ************************************小结*********************************************
// 1. 嵌套、导入、注释是保持sass条理性和可读性的最基本的三个方法
// 2. 混合器和继承是减少重复代码的主要特性
// *************************************************************************************

// 1. 声明变量 使用 `$` 标识符
// （中划线和下划线。取决于个人的喜好 `-` 两种用法相互兼容）
// 使用`-`声明，可以使用 `_`引用， 反之亦然。
$font-color: blue;
// 变量值引用其他变量
$border-color: $font-color;
.color {
    $font-color: red;
    color: $font_color; // 使用 `_` 引用
}

// 2.嵌套
// 2.1 父选择器标识符 `&`
// 2.2 支持群组选择器 h1, h2, h3 {}
// 2.3 支持子组合选择器 `>` 和同层组合选择器：`+` 和 `~`
// 2.4 属性嵌套: border: {width, style, color}
.hello {
    .color1 {
        $hover-color: yellow;
        color: $font-color;
        border: 1px solid $border_color; // 使用 `_` 引用
        &:hover { // => &:hover
            color: $hover-color;
        }
    }
    .qunzu {
        h1, h2, h3 { // 群组选择器
            color: $font-color;
            font-size: 12px;
        }
        > .zi { // `>` .quanzu 所有的 `.zi` 子元素
            color: red;
        }
        h1 + .zi {  // '+' `h1` 元素后紧跟的 `.zi` 元素
            color: green;
            border: 1px solid red { //  属性嵌套
                top: 0; // border-top: 0;
                right: 0;// border-right: 0;
            }
        }
        h2 ~ .zi { // '~'  `h2` 元素后面所有的 `.zi`元素
            color: #333;
            font-size: 20px;
        }
    }
}
// 3. @import 可以省略.sass或.scss文件后缀
// sass的@import规则在生成css文件时就把相关文件导入进来。
// 这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求
// 局部文件: 那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。
//          对此，sass有一个特殊的约定来命名这些文件。sass局部文件的文件名以下划线 `_` 开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
$comm-color: red;
// 3.2默认变量值 !default 如果之前有声明的就用之前的，否则使用默认的
// 3.3 嵌套导入 把样式文件导入到规则里面
@import '../assets/scss/comm.scss'; // 引入局部文件 _comm.scss
.imp-comm {
    text-align: left;
    color: $comm-color;
    .one {
        @import '../assets/scss/fontsize'; // 引入局部文件 _fontsize.scss
        font-size: $imp-font-size;
        color: green;
    }
}

// 4. 静默注释 不会出现在源代码中
/* css的标准注释格式 */
// sass 静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头

// 5. 混合器 使用 `@mixin` 标识符定义 `@include` 使用混合器
// 5.1 定义跨浏览器的圆角混合器
// 5.2 混合器中允许包含样式规则
@mixin border-round {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    // 混合器中的样式规则
    a {
        font-size: 12px;
        color: #333;
        text-decoration: line-through;
    }
}
// 5.3/5.4 混合器传递参数 (参数设置默认值)
@mixin link-color($color, $size: 28px) {
    box-shadow: 2px 2px 5px #666;
    a {
        color: $color;
        font-size: $size;
    }
}
.hh {
    border: 1px solid $comm-color {
        color: blue;
    }
    @include border-round; // 使用混合器 border-round
    // @include link-color(blue); // 使用带参数的混合器
    @include link-color($color: red, $size: 12px); // 使用带参数的混合器, 多个参数用`，`隔开($color:red, $size: 12);
}

// 6. 选择器继承 通过 `@extend` 语法实现 (不要用后代选择器去继承)
// .error {
//     border: 1px solid $comm-color;
//     background: #fdb;
// }
@import '../assets/scss/error'; // 导入sass文件
.info-error {
    @extend .error;
    display: inline-block;
    border-width: 3px;
    padding: 2px 4px;
    margin-top: 10px;
}

// ************************************小结*********************************************
// 1. 嵌套、导入、注释是保持sass条理性和可读性的最基本的三个方法
// 2. 混合器和继承是减少重复代码的主要特性
// *************************************************************************************

 

转载于:https://my.oschina.net/u/1773772/blog/3055136