zoukankan      html  css  js  c++  java
  • scss语法

    SCSS其实就是SASS新语法, 增强了对CSS3语法的支持

    1.变量(Variables)

    /*声明变明*/ 
    $color: #333;
    $bgcolor:#f36;
    
    /*引用变量*/
    body { body color: $color;}
    

    2.嵌套(Nesting)

    // 选择器的嵌套

    // 传统css写法
    section { margin: 10px; } 
    section nav { height: 25px; } 
    section nav a { color: #0982c1; } 
    section nav a:hover { text-decoration: underline; }
    
    // scss写法
    section{
        margin: 10px; 
        nav{ 
            height: 25px; 
            a{
                color: #0982c1; 
                &:hover{ text-decoration: underline;} 
            } 
        } 
    }
    

    // 属性嵌套

    // 传统css写法
    li { font-style: italic; font-family: serif; font-weight: bold; font-size:1.2em; }
    
    // scss写法
    li{ 
        font:{
            style: italic;
            family: serif;
            weight: bold; 
            size:1.2em;
        } 
    }
    

    3.Mixins ==> Mixins是SASS中最强大的特性之一, 简单点来说,Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用, 每个都写在选择器里

    // 格式
    @mixin name($参数名:参数值){
        /*样式规则*/
    }
    
    // 简单的实例
    @mixin error($borderWidth:2px){ 
        border: $borderWidth solid #f00; 
        color: #f00; 
    }
    
    // @include调用mixin
    /*直接调用error Mixins*/ 
    .generic-error { 
        @include error();
    } 
    
    /*调用error Mixins,并将$borderWidth参数重定义为3px*/
    .login-error { 
        @include error(3px);
    }
    
    老的语法中还支持另一种调用Mixins的方法。就是使用+
    .generic-error 
        +error() 
    .login-error 
        +error(3px)
    

    3.选择器继承(Selector Inheritance) ==> SASS可以从一个选择器继承另一个选择器下的所有样式。共用属性

    %block { 
        margin: 10px 5px; 
        padding: 2px; 
    }
    p { 
        @extend %block; 
        border: 1px solid #eee; 
    }
    h1{
        @extend %block;
        color:red;
    }
    
    // 编译出来的CSS
    p{ 
        border: 1px solid #eee;
    }
    h1{ 
        color:red;
    }
    p, h1{
        margin: 10px 5px; 
        padding: 2px; 
    }
    
  • 相关阅读:
    Java HashMap HashCode
    JS 笔记---持续更新
    彻底弄懂 JavaScript 执行机制
    几条jQuery代码片段助力Web开发效率提升
    原生JS与jQuery操作DOM对比
    jQuery->JavaScript一览表
    Jquery介绍
    canvas雪花
    canvas绘制多边形
    兼容性的事件处理程序
  • 原文地址:https://www.cnblogs.com/alantao/p/7880375.html
Copyright © 2011-2022 走看看