scss学习笔记

@charset "UTF-8";

$highlight-color:#F90;  //$来声明变量的
$basic-color:1px solid black;


/*引用方式*/
.btn{
    $width:100px; // 这个只能在{}里用，对外面的不影响
    width: $width;
    color:$highlight-color;
    border:1px solid $highlight-color;
}

/*scss 的多层嵌套*/
div {
    p {
        a{
            color:$highlight-color;
        }
    }
}
/*关于伪类的嵌套*/
div {
    p {
        &:after{
            border:$basic-color;
        }
    }
}

//子元素选择器 >
//相邻兄弟选择器 +
//普通兄弟选择器 ~  (div ~ p    div选择器不选择)


div {
    ~ p{
        color:$highlight-color;
    }
    > p {
        border:$basic-color;
    }
    nav + & {
        border:1px solid $highlight-color;
    }
}

//嵌套属性  border-style  border-width  border-color 可以这样写:
div {
    border {
        style:solid;
        width:10px;
        color:$highlight-color;
    }
}

//拆分多个scss文件，使用 @import 引入，不同文件最后会打包到一个css文件里
//css 也有@import 但是当用的时候，才会下载
//mixins.scss colors.scss grid.scss  这三个scss文件在引入的时候，可以忽略后缀
@import 'mixins';
@import 'colors';
@import 'grid';


//使用scss部分文件（局部文件）
//scss局部文件的文件名以下划线开头，sass就不会在编译时单独编译这个文件输出css，
//而只把这个文件用作导入，还是可以省略后缀，如下：（如这个文件：themes/_night-sky.scss）
@import "themes/night-sky";


//默认变量值
$link-color:red;
$link-color:green;
a {
    color:$link-color;  //color:green;
}
//可以设置默认值
$link-color:orange !default;  //权重很低，相当于!important 的对立面

a {
    $link-color:#d9d9d9;
    color:$link-color;  //color:#d9d9d9;
}

//嵌套导入


//下面是_aside-box.scss局部文件
div {
    background-color: #fff;
    width:100px;
}

//在anther-box.scss 引入这个局部文件
div {
    @import 'aside-box';
    height:100px;
}

//转会为==> div{background-color: #fff;width:100px;height:100px;}
//scss兼容css
//在scss里也可以导入css文件（以.css文件结尾的）按需加载css文件

/* scss里的注释有两种方式 */


//混合器
//  -->用来处理大段重复的样式（少的话，变量就可以替代）
//  使用@mixin 标识符定义 使用@include来使用这个混合器
@mixin rounded-corners {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

//引入混合器
div {
    width:100px;
    height:100px;
    border: 1px solid #000;
    @include rounded-corners;
}

//混合器中css规则
@mixin no-bullets {
    list-style: none;
    li {
        list-style-image: none;
        margin-left:0;
    }
}

ul.plain{
    color:#eee;
    @include no-bullets;
}

//编译的结果为：

ul.plain {
    color:#eee;
    list-style: none;
}

ul.plain li {
    list-style-image: none;
    margin-left:0;
}

// 给混合器传参
@mixin link-colors($normal,$hover,$visited){
    color:$normal;
    &:hover{
        color:$hover
    }
    &:visited{
        color:$visited;
    }
}

a {
    text-decoration:none;
    @include link-colors(red,green,orange)
}

//编译结果

a {
    text-decoration: none;
    color:red;
}
a:hover {
    color:green;
}
a:visited {
    color:orange;
}


//默认参数值      参数默认值使用$name: default-value的声明形式，
//默认值可以是任何有效的css属性值，甚至是其他参数的引用
@mixin link-colors{
    $normal,
    $hover:$normal,
    $visited:$normal
}

//解析结果 （直接调用@include）

{
    color:$normal;
    a:hover {
        color:$normal;
    }
    a:visited {
        color:$normal;
    }
}

//如果@include(red),编译结果
{
    color:red;
    a:hover {
        color:red;
    }
    a:visited {
        color:red;
    }
}


/*使用选择器继承来精简css 使用@extend 语法实现*/
.error {
    border-radius:10px;
}
.box {
    @extend .error;
    border-width:10px;
}

//编译结果
.box {
    border-radius:10px;
    border-width:10px;
}

//.box不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器也会被.box以组合选择器的形式继承

//.box 从 .error继承样式
.error a { // 应用到.box a 
    color: red;
    font-weight:100;
}

h1.error { //应用到h1.box
    font-size:1.2rem;
}

//继承的高级用法
//继承一个html元素的样式（一个灰掉的a链接标签）
.disabled{
    color:gray;
    @extend a;  // 继承a标签的所有默认样式
}

/*  数据类型
    数字，1, 2, 13, 10px
    字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
    颜色，blue, #04a3f9, rgba(255,0,0,0.5)
    布尔型，true, false
    空值，null
    数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
    maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
*/
 

 /*
    SassScript 对Unicode 字符集，或 !important 声明；    视为无引号字符串
    字符串：{
        有引号字符串，
        无引号字符串
    }
    使用#{}  scss会把有引号的字符串转化为没有引号的字符串，这样便于mixin引用选择器名
 */ 

 @mixin firefox-message($selector) {
     body.firefox #{$selector}:before {
         content: 'hello world'
     }
 }

@include firefox-message(".header");
 // 编译的结果为
body.firefox .header:before {
     content: 'hello world'
}

// 运算  + - * / 

$width:100px;

.box {
    width:10px*10 + 2px/2;
}

//编译结果
.box {
    width: 101px;
}
//如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

// 编译为：
p {
  font: 12px/30px;
}

/* 颜色值运算 */ 
p {
  color: #010203 + #040506;
}
// 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为（加减乘除相同）
p {
  color: #050709;
}

/* 字符串运算 */ 

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

// 编译为

p:before {
  content: "Foo Bar";  // 前面是有引号的字符串，后面是没有引号字符串转化的情况
  font-family: sans-serif; // 前面没有引号的字符串，后面是有引号的字符串
}


/*@if @else if*/

@mixin getColor($color) {
    @if $color == blue {
        color:$color;
    } @else if $color == green {
        color:$color;
    } @else if $color == red {
        color:$color;
    }
}

// @each 
@each $animal in green,orange,blue {
    .#{$animal}-icon {
        background-image: url('image/${$animal}.png');
    }
}

// 编译结果：
.green-icon {
    background-image: url('image/green.png');
}
.orange-icon {
    background-image: url('image/orange.png');
}
.blue-icon {
    background-image: url('image/blue.png');
}

// @for
@for $i from 1 through 3 {
    .item-#{$i} {
        width:2em * $i;
    }
}
// 编译结果
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}