首页 > 代码库 > Sass--@Rules指令

Sass--@Rules指令

2024-10-26 10:45:40   209人阅读

文件导入　　@import "fileName.scss"

文件导入后，其变量和指令都可以在这个文件中使用

例 1

1.scss

$str1: "str1 words";$str2: "str2 words";

 

global.scss

@import "1.scss";body{    .outside{        width: 500px;        height: 300px;        background: gray;        &:before{            content: $str1;        }        &:after{            content: $str2;        }    }}

 

 

终端

sass --watch scss:css

 

global.scss编译后

body .outside {  width: 500px;  height: 300px;  background: gray; }  body .outside:before {    content: "str1 words"; }  body .outside:after {    content: "str2 words"; }

 

 

但这样会导致1.scss文件也被编译一次，生成不必要的1.css

 

分音

如果需要导入scss文件，又不需要其被编译，可以在其文件名前加一个下划线。导入语句不需要修改。

注意：不要让文件夹中同时存在 1.scss 和 _1.scss ，会报错

 

 

@import嵌套

将上面的global.scss修改为

body{    .outside{        width: 500px;        height: 300px;        background: gray;        &:before{            content: $str2;        }        .inside{            @import "1.scss";            width: 100px;            height: 100px;            background: red;            &:after{                content: $str1;            }        }    }}

报错：找不到$str2。

这也算作一个作用域的问题。

 

 

 

@media

Sass中@media指令和Css中用法相同，但允许嵌套，引用变量

.outside{    width: 500px;    height: 300px;    $selectMedia: screen;    $maxWidth: max-width;    $minWdith: min-width;    @media #{$selectMedia} and (#{$minWdith}: 1000px){        background: red;    }}

 

编译后

.outside {  width: 500px;  height: 300px; }  @media screen and (min-width: 1000px) {    .outside {      background: red; } }

 

 

 

 

 

 

 

~END

 

Sass--@Rules指令


联系
我们