当前位置: 首页>后端>正文

scss设计稿1080怎么计算rem scss规范

***前面的文章,我们,讲解了less的框架应用规范,现在我又归类了一些scss的一些框架应用。
  供大家参考学习!!!!***

Sass 和 SCSS 其实是同一种东⻄西,我们平时都称之为 Sass,两者之间不不同之处有以下两点:

1.文件扩展名不不同,Sass 是以“.sass”后缀为扩展名,⽽而 SCSS 是以“.scss”后缀为扩展名

2.语法书写⽅方式不不同,Sass 是以严格的 缩进式 语法规则来书写,不不带⼤大括号 {} 和分号 ; ,而 SCSS的语法书写和 CSS 语法书写⽅方式类似,所以,我们接下来就主要以scss做技术分享,绝大多数,场景下,用户使用的,也都是scss。

首先创建变量

变量

scss变量使用 “ $” 符号创建。

命名变量分为:

普通变量和默认变量

普通变量定义后,可以在全局范围内使用。

普通变量

例子:

$root :red;
$root1:300px;   //定义变量,样式名与样式值
$root2:300px;

.box {
    width: $root1;
    height: $root2;
    background-color: $root;
}
                                            //下面的选择器直接套用定义的变量,面向全局使用。
.box1 {
    width: $root1;
    height: $root2;
    background-color: $root;
}

默认变量:

注: 只需要在定义的变量值后面加上 !default ,就可以将它设置成默认变量 ,设置默认变量后,不影响后面继续设置的变量,只是在没有 设置的情况下,页面上默认使用该默认变量属性。

sass 的默认变量量⼀般是⽤用来设置默认值,然后根据需求来覆盖的,覆盖的方式只需要在默认变量之前重新声明下变量量即可。

例子:

$root :red !default;//定义了该变量默认属性
$root1:300px;
$root2:300px;

.box {
    width: $root1;
    height: $root2;
    background-color: $root;
}
.box1 {
    width: $root1;
    height: $root2;
    background-color: $root;
}

变量的调用:

变量调用分为:全局变量和局部变量。

全局变量:例子:

$poty:200px;
$shool:300px;           //定义全局变量
$root:pink;

.box4{
    width: $poty;
    height: $shool;                   //调用全局变量
    background-color: $root;
}

局部变量: 该变量和less一样,只能应用在box4属性范围内。

.box4{

$poty:200px;
$shool:300px;               //定义局部变量,该变量和less一样,只能应用在box4属性范围内。
$root:pink;
$head:20px;

div{
    width: $poty;
    height: $shool;                  //调用局部变量
    background-color: $root;
}
p{
    margin-top: $head;                //调用局部变量
}

a{
    font-size: $head;                 //调用局部变量
}
}

嵌套: 嵌套原理和 less 一样,同样,上面代码既是一个局部变量也是一个,嵌套结构的代码。

注:嵌套的结构必须依赖于 HTML 元素的嵌套关系的结构

例子:

.box4{
$poty:200px;
$shool:300px;
$root:pink;
$head:20px;

div{
    width: $poty;
    height: $shool;
    background-color: $root;                        //如图,box4中还嵌套了div,p,a三类元素,这种嵌套的结构,在输出的                                                       css中会以后代选择器的形式呈现。
}

p{
    margin-top: $head;
}

a{
    font-size: $head;
}

}

混合宏:

注:scss中,声明混合宏,前面必须要加上 “ @mixin” 创建。 代码原理和less的混入类似。

声明,混合宏:

@mixin ttg{                     
    background-color: aqua;
    width: 200px;
    height: 300px;

}         //@mixin 是⽤用来声明混合宏的关键词,ttg 是混合宏的名称,花括号里的是复⽤用的样式代码。

调用混合宏:

注:使⽤用@mixin声明了了⼀个混合宏后,我们使用 @include 来调⽤用声明好的混合宏。

如下代码,我们设置好了一个拥有,宽高,背景颜色的属性变量, 然后为 box3元素直接调用设置好的变量名,这下,box3就直接有了宽高,背景颜色等属性。

@mixin ttg{
    background-color: aqua;
    width: 200px;
    height: 300px;
}
.box3{
    @include ttg;
}

混合宏,传一个不带值的参数 和less类似,参考less!

@mixin name ($root,$shool,$text){
    width: $root;                          //在混合宏"name"中定义了三个个不带任何数值的参数“$root,$shool,$text”     
    height: $shool
    background-color: $text;
}
    
.box5{
    @include name(200px, 300px,yellow ); //在调⽤时候给这个混合宏传一个参数值
}

混合宏,传一个带数值的参数: 和 less传入默认值同理

注明:当我们在设置样式值的时候如果就给了默认样式值,那么,我们在调用的时候,就可以不用再输入样式值了,直接调用样式名,引用。

如下:

@mixin name ($root:200px,$shool:300px,$text:pink){
    width: $root;
    height: $shool;
    background-color: $text;
}
.box5{
    @include name
}

但有时候,我们想要的值有变时,就还可以继续按照顺序,传入值,因为当默认值和传入值同时存在时,代码会就近原则,有选择传入的值。

如下:

注明:注意传入值的顺序,要传值的写在最前面,不传值的写在最后面,或者可以不写。 重要!!!!!

当传入值的值,和样式名默认带的值,同时存在时,,就近原则,优先执行传入的值!!!

@mixin name ($root:200px,$shool:300px,$text:pink){
    width: $root;
    height: $shool;
    background-color: $text;
} 
.box5{
    @include name(400px,400px,yellow)//就近原则,优先执行此处值,此处的值,会覆盖掉上面的默认值
}

扩展,继承: 通过关键词 “@extend” 来继承已存在的类样式块

如下图:我们为root1设置了宽高,背景属性,下面的元素,我们通过 @extend ,让它们完全继承root1的属性样式。这样一来,最后呈现的样式是和root1一样的。

.root1{
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.root2{
    @extend.root1;
}
.root3{
    @extend.root1;
}

占位符:   占位符通过 % 关键词来创建。

%topp声明的代码如果不被 @extend 调⽤用的话,不会产⽣任何代码。取代从前CSS中的代码冗余的情形。

%topp{
    margin-top: 80px;
    background-color: rgb(172, 127, 255);
}

.root4{
    width: 100px;
    height: 100px;
    @extend %topp;   
}

注:这段代码如果没有被 @extend 调⽤用,他并没有产⽣生任何代码块,只是静静的躺在你的某个 SCSS ⽂文件中。只有通过 @extend 调⽤用才会产⽣生代码:



https://www.xamrdz.com/backend/3kd1964213.html

相关文章: