W250511/16.scss/index.scss

// @import url(reset.css);
@import './reset.scss';
$a: red !default;
$b: 30;
$d: purple;

// $ 定义变量 用于存储信息 可以重复使用
// 存储的类型：字符串 数字 颜色 布尔值 null...
/*
    多行注释
    .sass .scss
    sass格式会省略花括号和分号 所以常用scss存储
*/

/*
 混合宏
 @mixin 声明
 @include 调用
*/
@mixin border {
    // border-radius: 20px;
    border-bottom: 3px solid #ff0;
}

@mixin border1($a) {
    border-radius: $a + px;
    border-left: 3px solid #0f0;
}

@mixin border2($b: 50, $d: 5) {
    border-radius: $b + px;
    border-right: $d + px solid pink;
}

@mixin border3($x) {
    box-shadow: $x;
}

/*
    继承
    声明方式：已存在的基类
    .class{}/.xxx{}
    调用：@extend
*/
.vase {
    font-size: 20px;
    color: purple;
}

/*
  占位符
  %placeholder
  声明：%xxxx
  调用：@extend 
*/
%ppp {
    color: #0f0;
}

/*
    函数：
    @function 函数名（形参） { @return xx }  
    #{函数名（实参）}px
*/
@function getNumber($aa) {
    @return $aa * 2;
}

/*
    操作符：
    +:前后单位必须统一
    -:前后需要空格
    *:只允许一个数值带单位
    /:在括号中进行运算 后面拼接单位
    颜色：颜色值分段运算
*/
.box {
    width: #{getNumber(300)}px;
    height: (800 / 2) + px;
    font-size: $b + px;
    border: 3px solid $a;
    background: #f00 + #ff0;
    // f00
    // ff0
    // ff0
    // @extend .vase;
    // @extend %ppp;
    // @include border;
    // @include border1(30);
    // @include border2;
    // @include border3(30px 40px 13px purple);
}

h1 {
    $c: blue !global;
    color: $c;
}

h2 {
    // color: $a !important;
    color: $c;
}

// ul {
//     overflow: hidden;
// }

// ul li {
//     float: left;
//     margin-left: 5px;
// }
// 1.标签嵌套
// 2.伪类嵌套
// 3.属性嵌套
ul {
    overflow: hidden;

    li {
        float: left;
        margin-left: 5px;
        border-bottom: 2px solid #f00;

        a {
            color: #000;

            // font-size: 30px;
            // font-weight: bold;
            font: {
                size: 40px;
                weight: bold;
            }

            &:hover {
                color: red;
            }
        }
    }
}