【Bootstrap】bootstrap入门之Scss知识点详解_03

目录

一.响应式网页

二.Bootstrap

三.栅格布局

四.SCSS

🔷 Scss的使用

🔷 Scss的语法

---

【前文回顾】👉 bootstrap入门之栅格布局、弹性布局、组件类_02

---

一.响应式网页

二.Bootstrap

三.栅格布局

四.SCSS

🔷 Scss的使用

Boot最重要的3个知识：① 手写媒体查询@media；② 栅格布局；③ Scss

1.css有缺点

语法不够强大，没有变量以及合理的代码复用机制，导致项目难以维护

css虽然有选择器，但是代码重用没有做到极致

我们需要动态样式语言，赋予css新的特性，让他更强大

常用的动态样式语言

(1) scss/sass（css+js结合体，boot4是用scss完成的，scss是当前的最新版本）

Sass: Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。Sass 是 Syntactically Awesome Style Sheets 的缩写。 | Sass 中文网

(2) stylus

Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器 | Stylus 中文网

(3) less（boot3使用less完成）

Less 快速入门 | Less.js 中文文档 - Less 中文网

扩展：什么是 CSS 预处理器：

CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。

CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架，在前端界，有三大 CSS 预处理器，分别是 SASS(SCSS), Less, Stylus。

或许有的人在问，那么 PostCSS 算什么呢？其实他只能算是 CSS 解析器。不能算作预处理器。

2.Scss

scss的语法及其贴近css的语法，就是在写css的时候，混入了js

添加了变量，嵌套，混合，导入，函数，指令等高级功能

这些新的功能让css更加的强大与优雅

Sass 是一个世界上最流行 、成熟、稳定、强大的 专业级CSS 扩展语言解析器。

Sass 是一个成熟、稳定、强大的 CSS 扩展语言解析器。

兼容CSS：Sass 完全兼容所有版本的 CSS。我们对于 兼容性非常重视，所以你可以放心地使用任何可用的 CSS 库。

功能丰富：Sass 拥有比其他任何 CSS 扩展语言更多的功能和特性。 

3.Scss的使用

快捷键：2次ctrl+c结束命令行

scss运行在后台，把scss转换成css文件，再把css传递给浏览器，让浏览器运行

浏览器不能执行scss文件

① 单文件

node-sass    scss文件路径   css文件路径

node-sass    scss/1.scss    css/1.css

② 多文件转换，以一个文件夹为单位进行转换

node-sass    scss文件夹    -o     css文件夹

node-sass    scss  -o  css

③ 单文件监听（打开监听器，scss文件中每次ctrl+s，都会自动的转换一次）

node-sass   -w  scss文件名称   css文件名称

node-sass   -w   scss/1.scss     css/1.css

④ 多文件监听，同时监听一个文件夹

node-sass    -w    scss文件夹   -o   css文件夹 

关于编译过程

① 编译命令，注意结构目录

② scss文件夹要和css编译好的文件夹同级

sass scss目录/文件.scss:css目录/文件.css

③ 监听整个文件夹进行整体编译，直接监听目录

sass -w scss目录:css目录

④ 如果没有立刻编译，按 ctrl+c 出现新的编译提示；但如果出现以下：你没有任何变化是要退出编译吗

Sass is watching for changes. Press Ctrl-C to stop.

^C终止批处理操作吗(Y/N)?

🔷 Scss的语法

1.变量

(1) 以$开头，以:为赋值

(2) 变量名的规则与选择器规则基本类似

字母，数字，-，_  ,

不能以数字开头

不要用关键字

例如：$my_width就是一个规范的scss变量
 

使用 $ 变量名创建变量，注意变量名不允许是中文或者其他特殊字符，尽量使用英文或英文加数字，可 以使用_, -等字符，不能数字开头。 变量值可以使任何css的值。所有的变量都会拿给元素当“值”使用！

(3) scss允许存入变量的数据有哪些

① 颜色

② 数值

③ 字符串

④ 属性值

⑤ 其它变量

注意，注意变量的作用域，同js一样

全局变量和局部变量
 

全局变量是写在所有选择器以外的，scss文件独立的区域。它是顺序读取的。变量的声明和赋值，一定 要在需要的元素值之前声明。 局部变量写在某个选择器作用域内的

//以下这些都是全局变量
$bgcolor:#31a1bb;
$headsize:18px-1px;
$itemborder:2px solid red;
$radius:50%;
p {
background-color: $bgcolor;
font-size: $headsize;
border: $itemborder;
border-radius: $radius;

//局部变量，只限于当前作用域使用
$ml:15px;
margin-left: $ml;
}

*scss文件代码

​// 变量
$jd_red:#00f;
$my_width:1rem;
$my_str:"子曾经曰过";
$my_float:left;
$my_style:solid;
$my_border:$my_width $my_style $jd_red;

p::after{
	$my_height:2.5rem;
	margin: $my_height;
	border:$my_border;
	content:$my_str;
	float:$my_float;
}
div{
  color: $jd_red;
	width: $my_width;
}
#d1{
	border-color:$jd_red;
}

*转换后的css文件代码

@charset "UTF-8";
p::after {
  margin: 2.5rem;
  border: 1rem solid #00f;
  content: "子曾经曰过";
  float: left; }

div {
  color: #00f;
  width: 1rem; }

#d1 {
  border-color: #00f; }

2.嵌套

scss中，根据html的父子级关系

可以在父选择器中，直接写子选择器

会被转换为对应的后代选择器

scss文件可以按照html 的包裹和嵌套规则书写，直接在 {} 写内部选择器，之后会编译成css文件， css会自动生成编译后合理的关系型选择器。重要体现是权重值的体现。会按照结构生成后代或子代选择 器。

*scss文件代码 

//嵌套
#content{
	color:#111;
	.top{
		color:#222;
		span{color:#121;}
		div{
			color:#123;
			a{color:#111;}
		}
	}
}

*转换后的css文件代码 

#content {
	color: #111;
}

#content .top {
	color: #222;
}

#content .top span {
	color: #121;
}

#content .top div {
	color: #123;
}

#content .top div a {
	color: #111;
}

伪类的嵌套，必须使用占位符，不然生成的选择器伪类之前会多一个空格

*scss文件代码 

//伪类的嵌套
a{
	color:#ff0;
	&:hover{color:#0ff;}
}

*转换后的css文件代码  

a {
	color: #ff0;
}

a:hover {
	color: #0ff;
}

🔹 示例：scss练习

$my_width:130px;  $my_height:40px;  $my_bg:渐变; $fontcolor:#fff;

使用scss写出按钮样式，hover的时候字体变成红色。一个200*200的div，红色背景，鼠标悬停时过渡到黄色，并且变为圆形

*scss/1.scss文件代码 

$my_width:130px;
$my_height:40px;
$my_bg:linear-gradient(to bottom, #27b1f6 0%, #0aa1ed 100%);
$fontcolor:#fff;
#btn1{
	display: inline-block;
	width: $my_width;
	height: $my_height;
	background: $my_bg;
	border-radius: .25rem;
	font-size: 1rem;
	color: $fontcolor;
	text-decoration: none;
	text-align: center;
	line-height: $my_height;
	transition: 1s;
	&:hover{
		color:#f00;
		box-shadow: 0px 0px 0px 3px #0ff;
	}
}

*scss/1.css文件代码  ——scss转换为css代码 

#btn1 {
	display: inline-block;
	width: 130px;
	height: 40px;
	background: linear-gradient(to bottom, #27b1f6 0%, #0aa1ed 100%);
	border-radius: .25rem;
	font-size: 1rem;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	transition: 1s;
}

#btn1:hover {
	color: #f00;
	box-shadow: 0px 0px 0px 3px #0ff;
}

*html文件 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="scss/1.css">
</head>
<body>
  <a id="btn1" href="#">查看详情</a>
</body>
</html>

执行结果：

3.导入

(1) 全局scss文件，不以下划线开头，可以被编译生成css文件

全局scss文件——styles.scss 

(2) 局部scss文件，一定以下划线开头，不会被编译生成css文件

局部scss文件——_colors.scss

(3) 在全局scss中导入局部scss，同时，被导入文件中的变量可以在全局scss文件中直接使用

在全局scss文件styles.scss中使用@import 指令，导入局部Scss文件，语法如下：

@import 指令"test";

🔹 关于局部Sass文件的导入

Sass源⽂件中可以通过指令导⼊其他Sass源⽂件，被导⼊的⽂件就是局部⽂件，局部⽂件让Sass模块化编写更加容易。

如果⼀个⽬录正在被Sass程序监测，⽬录下的所有scss/sass源⽂件都会被编译，但通常不希望局部⽂件被编译，因为局部⽂件是⽤来被导⼊到其他⽂件的。如果不想局部⽂件被编译，⽂件名可以以下划线（_）开头。

假设我们有⼀个局部⽂件： _colors.scss，该⽂件会被导⼊到styles.scss⽂件，然后styles.scss会被编译为styles.css。_colors.scss⽂件内容：$primary-color: orange;$secondary-color: gold;

使⽤@import导⼊局部⽂件，styles.scss内容如下：

@import "colors";
body {
    color: $primary-color;
    background: $secondary-color;
}

可以看到在使⽤@import导⼊局部⽂件_color.scss时，省略了下划线和扩展名，这是允许的。

全局Scss文件styles.scss编译后的CSS⽂件内容如下：
body {
    color: orange;
    background: gold;

}

4.混合器

把多行css封装进一个混合器，哪里需要哪里调用

定义带参数的混合器

@mixin my_bg($d,$c1,$c2) { // 定义混合指令
         background: -webkit-linear-gradient($d,$c1,$c2);
         background: -moz-linear-gradient($d,$c1,$c2);
         background: -ms-linear-gradient($d,$c1,$c2);
         background: -o-linear-gradient($d,$c1,$c2);
}

调用混合器

div {   
         @include my_bg(top,#aaa,#fff); // 引用混合指令
}

关于混合指令mixin
 

//定义混合指令
@mixin fk100 {
    width: 100px; height: 100px;
}

.box1 {
      background-color: red; 
      // 引用混合指令
      @include fk100; 
}

//可以接受传参的混合指令
@mixin btn($w,$h,$s) {
   border-radius: 5px;
   background-color: red;
   color: #fff;
   // 变值
   width: $w;
   height: $h;
   font-size: $s;
}

.btn1 {
   @include btn(100px,30px,12px);
}
.btn2 {
   @include btn(80px,29px,12px);
}

5.继承

一个选择器可以应用另外一个选择器的所有样式，叫做继承

#d2 {
         width: 200px;
         @extend #d1;
}

在css中，#d1和#d2编译后会表现为群组选择器，共用#d1的样式，代码更加优化。

关于继承指令
 

👉 1. 使用继承：继承的好处是，编译后的css，使用的是群组选择器，代码更加优化。

.box3 {
  background-image: linear-gradient(red,yellow);
  height: 40px;
}
.box4 {
  // 继承
  @extend .box3;
  font-size: 14px;
}
.box5 {
  @extend .box3;
}

👉 2. 继承多个选择器的样式

.box4 {
  // 继承
  @extend .box3;
  font-size: 14px;
}
.box5 {
  @extend .box4,.box6;
}
.box6 {
  color: red;
}

👉  3.占位符选择器%  ——占位符选择器可以被继承，但不会被编译

.box5 {
  @extend .box4,%boxcolor;
}
%boxcolor {
  color: red;
}

6.运算

scss 具有计算功能，但是乘除法中对单位的要求格式很高，结论scss的实际功能是css样式渲染，尽量 减少计算的出现。

(1) 加

scss拼接字符串的特点

① 加号左边的字符串有双引号，结果就有双引号

② 加号左边的字符串没有双引号，结果就没有双引号

//加法
p::after{
  content:"青青的假发"+abc;
  font-family: a123+"rialYaHei";
}

// 编译后的css代码
p::after {
  content: "亮亮的假发abc";
  font-family: a123rialYaHei; }

(2) 减

scss的变量名是可以包含减号的

所以当减法运算式中，有变量的时候，减号前后要加空格

//减法
$my-width:100px;
p{
  width: $my-width - 10px;
}

//scss文件编译后的css代码
p {
  width: 90px; 
}

(3) 除

在scss中  /  有两个作用，1.除法  2.分隔符

scss中判定/是除法的场景

① 除号两边的数字，有变量或者返回值(方法的返回值)的时候，是除法

② 除法计算式被小括号包裹，是除法

③ 除法计算式是其它计算式的一部分，是除法

// 除法
p{
  font-size: 10px/5px;
  $my-width:1000px;
  width:$my-width/2;
  height:(500px/2);
  // 除法计算式是其它计算式的一部分
  margin: 5px+8px/2;
}

// scss文件编译后的css代码
p {
  font-size: 10px/5px;
  width: 500px;
  height: 250px;
  margin: 9px; 
}

(4) 颜色运算

颜色要分段运算，红+红  绿+绿  蓝+蓝

计算的结果如果超过了ff，也按ff显示，rgb也是这样计算

rgba的运算，要求alpha必须相同才可以运算

//颜色的运算
div{
  background-color: rgba(1,2,3,0.5)+rgba(2,3,4,0.5);
}

//scss文件编译后的css代码
div {
  background-color: rgba(3, 5, 7, 0.5); 
}

(5) scss的插值运算

在字符串中使用#{变量/运算式}进行插值

#{} 使用差值语句包裹的变量就不作为变量使用了，就变成了字符串了。

注意的是，选择器不能直接使用变量名。

示例1

//插值运算
$num:123;
$str:"liangliang ate #{$num} ge jianbings,bu gei qian!";
p::after{
  content: $str;
}

//scss文件编译后的css代码
p::after {
  content: "liangliang ate 123 ge jianbings,bu gei qian!"; 
}

示例2 

$i:item;

.nav-#{$i}{
  color:red;
}

7.函数

(1) 预定义函数

① 数学函数

round(4.5)  四舍五入

ceil(4.5)    向上取整

floor(4.5)  向下取整

min(1.2,3.4,0.5) 取最小值

max(1.2,3.4,0.5) 取最大值

random()

//预定义函数
div{
  width: round(4.5)px;
  width: floor(4.5)px;
  height: max(1.2,3.4,0.5)px;
  margin: random();
}

//scss文件编译后的css代码
div {
  width: 5 px;
  width: 4 px;
  height: 3.4 px;
  margin: 0.48823;
}

② 字符串函数

unquote("abc");   去除字符串双引号

quote(abc);       字符串添加双引号

//字符串函数
div::after{
  font-size:unquote("12px");
}

//scss文件编译后的css代码
div::after {
  font-size: 12px; 
}

(2) 自定义函数---我们自己封装的方法

@function add($a,$b) {
        @return $a+$b+px;
}

关键字加@，参数有$符号

//自定义函数
@function add($a,$b){
  @return $a+$b+px;
}
div{
  width: add(150,20);
}

//scss文件编译后的css代码

div {
  width: 170px;
}

8.指令

高级语法语句

(1) 条件语句

条件语句和js的条件语句语法基本相似，只是在判断的条件上，使用 and 或者 or 关键词

@if 判断条件1 and 判断条件2 or 判断条件n {
box-shadow: 15px 15px 13px #333;
}@else {
box-shadow: 5px 5px 3px #333;
}

 案例1

@mixin btn($w,$h){
  width: $w;
  height: $h;
  border-radius: 5px;
  // 可能是变量可能是默认的 and且 or或
  @if $w>200px and $h>100px {
  box-shadow: 15px 15px 13px #333;
  }@else {
  box-shadow: 5px 5px 3px #333;
  }
}
.btn1 {
  @include btn(180px,80px);
}

 案例2 

//指令if-else
$score:96;
div{
	@if($score>95){
	   content:"一辆大G";
	}@else if($score>85){
	     content:"GTR";
	}@else if($score>75){
	    content:"卡宴";
	}@else if($score>65){
	    content:"A5";
	}@else if($score>60){
	   content:"五菱宏光";
	}@else{
	   content:"断绝父子关系";
	}
}

//scss文件编译后的css代码
@charset "UTF-8";
div {
  content: "一辆大G"; 
}

(2) 循环语句

注意循环语句涉及计算小心编译的结果。使用变量在选择器中注意要用差值 #{} 包裹 

//from x to y 不包含y（不包含结束值）
@for $i from 1 to 10 {
  ol li:nth-child(#{$i}){
  width:100px + $i*10;
 }
}
//from a through b 包含b（包含结束值）
@for $i from 1 through 10 {
  ul li:nth-child(#{$i}){
  width:100px + $i*10;
  }
}