scss总结大全，如scss变量引入拆分，scss初中阶函数,继承选择器，媒体查询等

变量引入拆分：

@import 'Viriables';

.main {
    background-color: $color2;
}

.module {
    font-size: $font1;
}

.feature {
    background-image: linear-gradient($color1, $color2);
}

$color1 : pink;
$color2 : green;
$font1:14px/2;
// 1 在scss文件名字前加一个下划线会使该文件变成scss私有文件，不会
// 自动生成css文件，该文件可以被引入

// 2 Viriables为变量的意思 在项目比较大的时候可以创建一个额外的
// scss文件来储存这些变量 在通过@import来引入 注意前有下划线的
// 文件引入时可以不加下滑线

初中阶函数:

// 一、字符串函数 

// unquote($string)：只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。
// quote($string)：只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

// 二、数字函数 

// percentage($value)：将一个不带单位的数转换成百分比值，如果转换的值是一个带有单位的值，那么在编译的时候会报错误信息： 
// round($value)：将数值四舍五入，转换成一个最接近的整数，可以携带单位的任何数值。 
// ceil($value)：将大于自己的小数转换成下一位整数；将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身1的整数。也就是只做入，不做舍的计算 
// floor($value)：将一个数去除他的小数部分；floor()函数刚好与ceil()函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算 
// abs($value)：返回一个数的绝对值； min($numbers…)：找出几个数值之间的最小值； 
// max($numbers…)：找出几个数值之间的最大值。 

// 三、List函数 

// length($list)：返回一个列表的长度值； 
// nth($list, $n)：返回一个列表中指定的某个标签值 
// join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表； 
// append($list1, $val, [$separator])：将某个值放在列表的最后； 
// zip($lists…)：将几个列表结合成一个多维的列表； 
// index($list, $value)：返回一个值在列表中的位置值。

// 四、自定义函数
// 1 scss函数名中的中划线和下划线是等同的，font-size和font_size指向同一个函数。

// @function function-name($parameter) {
//     @return value-to-be-returned;
// }
@function column-width($col, $total) {
    @return percentage($col/$total);
}

.div {
    width: column-width(40, 8);
}

/*文本格式化，超出范围，显示省略号*/
@mixin text-overflow($width:100%, $display:block) {
    width: $width;
    display: $display;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

继承选择器：

// 使用scss的时候，最后一个减少重复的主要特性就是选择器继承。
// 选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。
// @extent @extend
.div {
    font-size: 14px;
}

.item {
    @extend .div;
    background: pink;
}

// 群组选择器的嵌套 你需要在一个特定的容器元素内对一个群组选择器进行修饰时。
// scss群组选择器的嵌套 但这么写有可能生成的css文件很大会降低网站运行速度
.container {

    h1,
    h2,
    h3 {
        margin-bottom: 8px;
    }
}

// 子选择
article>section {
    border: 1px solid #ccc
}

// 同层选择
header+p {
    font-size: 1.1em;
}

// 同层全体组合选择器~ 选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
article~article {
    border-top: 1px dashed #ccc
}

媒体查询：

// 有些代码需要放在文件末尾去执行 比如媒体查询在不同屏幕下的改变 若放在后面 或编辑在中间比较影响阅读 不方便后期维护
// 介绍一个新的引入方式 @content; 书写这个时候 它引入的位置 会替换掉的它的代码
@mixin ipad($height) {
    @media screen and (min-width:768px) {
        height: $height;
        @content;
    }

}

.header {
    width: 1000px;

    @include ipad(200px) {
        width: 500px;
    }
}

.footer {
    color: blue;

    @include ipad(100px) {
        color: red;
    }
}


// 对比一下css码 理解一下
// .header {
//     width: 1000px;
// }

// @media screen and (min-width: 768px) {
//     .header {
//         height: 200px;
//         width: 500px;
//     }
// }

// .footer {
//     color: blue;
// }

// @media screen and (min-width: 768px) {
//     .footer {
//         height: 100px;
//         color: red;
//     }
// }

mixin混入：

// 代码赘余 解决方案可以在该文件下定义一个@mixin 再在需要的代码片段中引入


// @mixin name {
// 更高级的做法是创建一个_mixix文件 把类似这种需要多处调用的归结到一起 最后引用就行
//     混入
// }



// @mixin singleline-ellipsis($width) {
//     // 括号内可以传入变量
//     width: $width;
//     overflow: hidden;
//     white-space: nowrap;
//     text-overflow: ellipsis; //文本超出用省略号表示
// }
@import 'mixins.scss';

.text {
    @include singleline-ellipsis(600px);

}

.content-text {
    @include singleline-ellipsis(1000px);
}



// .text {
//     overflow: hidden;
//     white-space: nowrap;
//     text-overflow: ellipsis; //文本超出用省略号表
//     width: 600px;
// }
// .content-text {
//     overflow: hidden;
//     white-space: nowrap;
//     text-overflow: ellipsis; //文本超出用省略号表
//     width: 600px;
// }

@mixin singleline-ellipsis($width) {
    // 括号内可以传入变量
    width: $width;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; //文本超出用省略号表示
}