学习笔记

Appearance

Scss ​

介绍 ​

官网 Sass又名SCSS，是CSS预处理器之一

  • CSS 预处理器

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、**函数（如右侧代码编辑器中就使用了变量$color）**等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

  • 什么是Sass

Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。
Sass 是采用 **Ruby **语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

Sass和Scss ​

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

  • 1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  • 2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

image.png

安装使用 ​

参考

  • ruby 版本
bash
ruby -v
ruby -v

如果输出 ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin20] 说明已经安装成功

  • ruby 安装
bash
brew install ruby
brew install ruby
  • sass 安装
bash
sudo gem install sass
sudo gem install sass
  • sass 版本
bash
sass -v
sass -v

Scss的语法 ​

变量 ​

声明变量 ​

image.png
Sass 的变量包括三个部分：

  1. 声明变量的符号“$”
  2. 变量名称
  3. 赋予变量的值

普通变量与默认变量 ​

sass 的默认变量仅需要在值后面加上 !default 即可。

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

css
// 编译前
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

// 编译后
body{
    line-height:2;
}
// 编译前
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

// 编译后
body{
    line-height:2;
}

变量的调用 ​

css
// 定义
$width: 100px;

// 调用
body {
  width: $width;  
}
// 定义
$width: 100px;

// 调用
body {
  width: $width;  
}

局部变量和全局变量 ​

css
// 定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
$color: orange !default;

.block {
	// 调用全局变量
	color: $color;
}
em {
	// 定义局部变量
	$color: red;
	a {
		// 调用局部变量
		color: $color;
	}
}
span {
	// 调用全局变量
	color: $color;
}
// 定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
$color: orange !default;

.block {
	// 调用全局变量
	color: $color;
}
em {
	// 定义局部变量
	$color: red;
	a {
		// 调用局部变量
		color: $color;
	}
}
span {
	// 调用全局变量
	color: $color;
}

在元素内部定义的变量不会影响其他元素。
全局变量就是定义在元素外面的变量
局部变量只会在局部范围内覆盖全局变量

嵌套 ​

选择器嵌套 ​

css
// 编译前
nav {
	a {
		color: red;

		header & {
			color:green;
		}
	}  
}


// 编译后
nav a {
	color:red;
}

header nav a {
	color:green;
}
// 编译前
nav {
	a {
		color: red;

		header & {
			color:green;
		}
	}  
}


// 编译后
nav a {
	color:red;
}

header nav a {
	color:green;
}

属性嵌套 ​

属性前缀相同，后缀不一样，如font-，margin-，padding-**

css
// 编译前
.box {
    font: {
        size: 12px;
        weight: bold;
    }  
}

// 编译后
.box {
    font-size: 12px;
    font-weight: bold;
}
// 编译前
.box {
    font: {
        size: 12px;
        weight: bold;
    }  
}

// 编译后
.box {
    font-size: 12px;
    font-weight: bold;
}

伪类嵌套 ​

借助&符号完成伪类嵌套

css
// 编译前
.box{
  &:before {
    content:"伪元素嵌套";
  }
}

// 编译后
.box:before{
    content:"伪元素嵌套";
}
// 编译前
.box{
  &:before {
    content:"伪元素嵌套";
  }
}

// 编译后
.box:before{
    content:"伪元素嵌套";
}

混合宏 ​

声明混合宏 ​

在 Sass 中，使用“@mixin”来声明一个混合宏，{}里面是复用的代码
不带参数混合宏：

css
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

带参数混合宏：

css
@mixin border-radius($radius: 5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
@mixin border-radius($radius: 5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

复杂的混合宏：

css
// 加入了条件判断
@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}
// 加入了条件判断
@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

调用混合宏 ​

css
// 声明
@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

// 调用
button {
    @include border-radius;
}
// 声明
@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

// 调用
button {
    @include border-radius;
}

混合宏的参数 ​

包含不带值的参数和带值的参数【默认值】

css
@mixin border-radius($radius: 5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(3px);
}
@mixin border-radius($radius: 5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(3px);
}

多个值
当混合宏传的参数过多之时，可以使用参数来替代

css
// 编译前
@mixin padding($padding...){
  padding: $padding ;
}

.box-center {
  @include padding(500px, 300px);
}

// 编译后
.box-center {
  padding: 500px, 300px;
}
// 编译前
@mixin padding($padding...){
  padding: $padding ;
}

.box-center {
  @include padding(500px, 300px);
}

// 编译后
.box-center {
  padding: 500px, 300px;
}

会产生多个对应的样式代码，造成代码的冗余

扩展/继承 ​

css
// scss
.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}

.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
}

.btn-second {
    background-color: orange;
    color: #fff;
    @extend .btn;
}

// CSS
.btn, .btn-primary, .btn-second {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}

.btn-primary {
    background-color: #f36;
    color: #fff;
}

.btn-second {
    background-clor: orange;
    color: #fff;
}
// scss
.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}

.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
}

.btn-second {
    background-color: orange;
    color: #fff;
    @extend .btn;
}

// CSS
.btn, .btn-primary, .btn-second {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}

.btn-primary {
    background-color: #f36;
    color: #fff;
}

.btn-second {
    background-clor: orange;
    color: #fff;
}

在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：

混合宏、继承和占位符 ​

  • 混合宏

生成代码不会合并

  • 继承

生成代码会通过选择器合并【未使用代码会继续存在】

  • 占位符

生成代码会通过选择器合并【未使用代码不会存在】

占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

css
//SCSS中混合宏使用
@mixin mt($var){
    margin-top: $var;  
}

.block {
    @include mt(5px);

    span {
        display:block;
        @include mt(5px);
    }
}

.header {
    color: orange;
    @include mt(5px);

    span{
        display:block;
        @include mt(5px);
    }
}

//SCSS 继承的运用
.mt{
    margin-top: 5px;  
}

.block {
    @extend .mt;

    span {
        display:block;
        @extend .mt;
    }
}

.header {
    color: orange;
    @extend .mt;

    span{
        display:block;
        @extend .mt;
    }
}

//SCSS中占位符的使用
%mt{
    margin-top: 5px;  
}

.block {
    @extend %mt;

    span {
        display:block;
        @extend %mt;
    }
}

.header {
    color: orange;
    @extend %mt;

    span{
        display:block;
        @extend %mt;
    }
}
//SCSS中混合宏使用
@mixin mt($var){
    margin-top: $var;  
}

.block {
    @include mt(5px);

    span {
        display:block;
        @include mt(5px);
    }
}

.header {
    color: orange;
    @include mt(5px);

    span{
        display:block;
        @include mt(5px);
    }
}

//SCSS 继承的运用
.mt{
    margin-top: 5px;  
}

.block {
    @extend .mt;

    span {
        display:block;
        @extend .mt;
    }
}

.header {
    color: orange;
    @extend .mt;

    span{
        display:block;
        @extend .mt;
    }
}

//SCSS中占位符的使用
%mt{
    margin-top: 5px;  
}

.block {
    @extend %mt;

    span {
        display:block;
        @extend %mt;
    }
}

.header {
    color: orange;
    @extend %mt;

    span{
        display:block;
        @extend %mt;
    }
}

运算符 ​

数学运算 ​

+-*/
可以通过括号来修改他们的运算先后顺序

”/ ”符号被当作除法运算符时有以下几种情况：
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。

css
// SCSS
p {
    font: 10px/8px;             // 纯 CSS，不是除法运算
    $width: 1000px;
    width: $width/2;            // 使用了变量，是除法运算
    width: round(1.5)/2;        // 使用了函数，是除法运算
    height: (500px/2);          // 使用了圆括号，是除法运算
    margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
// SCSS
p {
    font: 10px/8px;             // 纯 CSS，不是除法运算
    $width: 1000px;
    width: $width/2;            // 使用了变量，是除法运算
    width: round(1.5)/2;        // 使用了函数，是除法运算
    height: (500px/2);          // 使用了圆括号，是除法运算
    margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

变量运算 ​

css
width: $width/2;            // 使用了变量，是除法运算
width: $width/2;            // 使用了变量，是除法运算

颜色运算 ​

css
// before
p {
  color: #010203 + #040506;
}

// after
p {
  color: #050709;
}
// before
p {
  color: #010203 + #040506;
}

// after
p {
  color: #050709;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09

字符运算 ​

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

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

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

如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。

Scss和Less的区别 ​

...

甘公网安备 号
Copyright © 2016 - 2023  forguo
总访问量， 总访客数
平台公约