SCSS全解

SCSS教程

1. SCSS 是什么

2. SCSS 的历史

3. 安装与运行

   1. 零配置学习 - 使用 parcel

   2. 零配置学习 - 使用 jsbin.com

4. 最简单的几个语法

   1. 嵌套选择器

   2. 变量

      $grey:#666;
      $gray:$grey;
      $border-width:2px;
      
      .nav{
      	border:$border-width solid $grey;
      	>ul{
      	background:white;
      	>li{
      	border:$border-width solid red;
      	}
      	}
      }

   3. mixin

      什么是mixin，就是在css中使用类似于函数的代码.

      @mixin和@include同时使用。

      $grey:#666;
      $gray:$grey;
      $border-width:2px;
      @mixin debug{
      	border:1px solid red;
      }
      
      .nav{
      	@include debug;
      	border:$border-width solid $grey;
      	>ul{
      	background:white;
      	>li{
      	border:$border-width solid red;
      	}
      	}
      }

      mixin这里可以设置参数

      $grey:#666;
      $gray:$grey;
      $border-width:2px;
      @mixin debug($border-color){
      //@mixin debug($border-color:red)  如果什么颜色都没传，那么默认就是红色 
      	border:1px solid $border-color;
      }
      
      .nav{
      	@include debug(red);
      	border:$border-width solid $grey;
      	>ul{
      	background:white;
      	>li{
      	border:$border-width solid red;
      	}
      	}
      }

      mixin的问题就是：最终代码还是通过复制粘贴，并没有实际节省代码。因此我们需要placeholder。

   4. placeholder

​ 把mixin改成%

​ 省代码的原理就是不copy样式，而是将选择器提到样式前面。

$grey:#666;
$gray:$grey;
$border-width:2px;

%box {
	box-shadow:0 0 3px black;
	margin:10px;
	background:white;
	border-radius:4px;
}

.nav{
	>ul{
	background:white;
	
	>li{
	@extend %box; 
	
	}
	}
}

.demo{
	height:100px;
	@extend %box;
}

维基百科

https://zh.wikipedia.org/wiki/Sass

Sass（英文全称：Syntactically Awesome Stylesheets）

是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的类 CSS 语言。

发行时间：2007年 稳定版本：2016年3月28日

Sass 十分简洁，语法中几乎不含括号。

body
	color red
p
	font-size 10px

后来前端工程师表示不含括号看不懂，于是 Sass 的开发者又提供了 Scss，含括号，就基本和CSS一样了。但是SCSS添加了一些功能，比如变量、嵌套、混入（Mixin）、选择器继承等。

body {
	color:red;
p{
	font-size:10px
}
}

弱弱的前端工程师终于表示能看懂了。

Sass的官方解释器是开源的并且用Ruby语言写成，但是也有用PHP、C语言、Java等实现的版本（C语言版本叫做llibSass，Java语言版本叫做JSass）。

课堂上用到的代码

cd scss-1
npm init -y
npm i -D parcel
npx parcel index.html

如果发现 node-sass 安装出错，请百度。 如果需要设置 npm 淘宝源，请百度。

SCSS 基础语法

在手机端/APP学习本课

中文文档：www.sasscss.com/docs/#css-extensions

1. 选择器扩展

   1. BEM 命名法

      全称是Block Element Modifier，css的命名法

      1. 取一个主要的名字，比如user-card

      2. 所有的命名围绕.user-card

      3. .user-card__picture, user-card__name,.user-card__description ，或者当鼠标悬浮在卡片上时，或者是点击卡片，可以写成.user-card--active,.user-card--deactive,.user-card__picture--active，曾经在中国很流行。但是写起来很繁琐。

      4. 方方老师推荐的方法

         比如.user-card__picture--active,可以写成.userCard-picture .active两个class

   2. 嵌套选择器

   3. & 符号

      1. 假设我们现在有如下结构

         <div class="userCard">
               <div class="userCard-name"></div>
               <div class="userCard-oneSentence"></div>
               <div class="userCard-description"></div>
         </div>

         scss嵌套可以写成下面这样，我们发现.userCard-name在浏览器中会重复

         .userCard{
             width:100px;
         
             .userCard-name{
                 color:white;
             }
         }

         因此我们改成下面这种写法

         .userCard{
             width:100px;
         
             &-name{
                 color:white;
             }
         }

      2. &.active 和.active的区别

         .userCard{
             width:100px;
         
           .active{
             //这个表示.userCard中的后代元素
           }
           &.active{
             //这个表示userCard自己被激活
           }
         }

   4. 嵌套属性

      .userCard{
          width:100px;
      
          &-name{
              color:white;
            font:{ //加了:就会被认成属性,不加的话会被认成tag
              size:28px;
              weight:bold;
              family:'Courier New',Courier,monospace;
            }
          }
      }
      
      //最终会变成
      .userCard-name{
        color:white;
        font-size:28px;
        font-weight:bold;
        font-family:'Courier New',Courier,monospace;
      }

      上面的写法也特别适合background这种有很多缩写的属性。

      background:{
        color:red;
        image:url(.);
        size:cover;
      }

2. 注释

   /* */ 会保留
   
   //单行注释不会保留
   
   /*！*/带!的注释会保留到css文件中

3. 变量

    $width: 5em;

   变量是有作用域的。

   比如下面的代码，加入我想在其他地方使用$red

   $red:#f60;
   .userCard{
     width: 100px;
     
    &.active{
        background:yellow;
    }
     &-name{
         color:black;
         &:hover{
             color:$red;
         }
     }
     
   }

   可以把变量放到作用域里。

   .userCard{
     width: 100px;
     
    &.active{
        background:yellow;
    }
     &-name{
       $red:#f60;//只有.userCard-name里面有个变量叫red
         color:black;
         &:hover{
             color:$red;
         }
     }
     
       &-oneSentence{
       $red:red;
       color:$red;
       border:1px solid $red;
     }
     
   }

   引入变量是为了后期方便修改。

   可以使用 !global 强行变为全局变量（不推荐使用）

   .userCard{
     width: 100px;
     
    &.active{
        background:yellow;
    }
     &-name{
       $red:#f60 !global;//只有.userCard-name里面有个变量叫red
         color:black;
         &:hover{
             color:$red;
         }
     }
     
       &-oneSentence{
       
       color:$red;
       border:1px solid $red;
     }
     
   }

   如果你定义了一个名为 $main-width，您可以使用 $main_width访问它。

4. 运算 数字的加减乘除模5中运算, css被scss鸡了，所以也支持，比如calc(200px / 2)，不打空格可能会报错。

   width: 100px + 100px + 100px;
   width: 100px * 100;

   scss的除法

   原生的/代表分割两个不同的数值

   //1.当除法用变量的时候
   $width:100px
   
   width: $width / 2;
   
   //2.用括号括起来
   width:(100px/3)
   
   //3.如果用了其他的语法，比如加减法
   width:100px/3 -0;

   取模（用来处理奇偶性）

   width: 100 % 3
   
   //width: 1

   颜色相关运算

   $red:#ff0000;
   
   color: $red + #888888;

   scss有十几个内置的颜色函数，用到的时候再去搜。

   字符串插值

   &-oneSentence{
     $red:#f60;
     border:1px solid red;
     &::before{
       content:'[{$red}'
     }
     &::after{
       content:']'
     }
   }

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SCSS 2</title>
  <link rel="stylesheet" href="./2.scss">
</head>
<body>
<div class="userCard">
  <div>
    <div class="userCard-name">饥人谷</div>
    <div class="userCard-oneSentence">前端社区</div>
  </div>
  <div class="userCard-description">前端社区</div>
</div>
</body>
</html>

/*单行注释*/
body {
}
$red-color: #6f0;
.userCard {
  width: 100px;
  &.active {
    background: yellow;
  }
  &-name {
    color: black;
    &:hover {
      color: $red-color;
    }
    font: {
      size: 28px;
      weight: bold;
      family: 'Courier New', Courier, monospace;
    }
  }
  &-oneSentence {
    $red: #f60;
    &::before {
      content: '「 #{$red}';
    }
    &::after {
      content: '」';
    }
  }
  &-description {
  }
}

制作会动的按钮

codepen

加了下面这段代码，整个窗口就不会再滚动了。

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

keyframes中，各个阶段设置百分比很麻烦，可以使用@for来简化代码,具体可以看原文。

@keyframes carousel {
	@for $i from 0 to $n { // 0, 1, 2, 3, 4 
		//Sass动画 
	} 
}


/* 著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/preprocessor/automating-css-animations-with-sass.html © w3cplus.com
*/

$z:10%;
  
  @keyframes x {
    @for $i from 1 to 5 {
      #{$i * $z}{
        color:red;
      }
    }
    }  

上面这段代码会生成下面这段代码

如果出现动画没有效果，很有可能是{}match有问题。

css和scss最好的practice rule就是CRM(Copy Run Modify)

SCSS响应式（上）

这节课我们依然沿用「就是干」的思路来学习如何用 SCSS 做到响应式（实际上跟 CSS 的思路一样，我在 CSS 深入浅出里讲过）

如何适配所有手机（不包括PC）

1. 所有宽度用 vw 计算，这样就能动态缩放。

2. 使用函数将 px -> vw 的计算过程简化：

    @function px($npx) {
        @return $npx/375 * 100vw;
    }

如果 vw 的兼容性你不能接受，可以使用「动态 REM 方案」来模拟。

SCSS适应所有手机

如何写一套css，适应所有的手机？比如下面淘宝的圆形logo，如何自适应所有的页面，logo长宽可以自适应？

答：所有宽度用 vw 计算，这样就能动态缩放。

codesandbox

Screen Shot 2022-06-17 at 3.55.32 PM

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.icons{
  display:flex;
  border:1px solid red;
  justify-content: space-between;
  padding:0 4%;
  
  
 > .icon{
    border:1px solid blue;
    border-radius:50%;
    height:20vw;
    width:20vw;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-shrink:0;
  }
}

如果这个时候，设计师的手机图是按照iphone 6的尺寸设计的，那么可以通过设计稿上的宽或者高/iphone 6手机的宽度，比如圆形logo的宽和高是48px，iphone 6的宽度是375px，用48/375 得到0.128，那么width和height可以设置成12.8vw。

如果每个数值都这样写的话会很麻烦，因此需要用到scss的一个很强大的功能，@function， 这样就可以保证比例一致。

@function px($npx){
 @return $npx/375*100vw;
}

.icons{
  display:flex;
  border:1px solid red;
  justify-content: space-between;
  padding:0 4%;
  
  
 > .icon{
    border:1px solid blue;
    border-radius:50%;
    height:px(61);
    width:px(61);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-shrink:0;
  }
}

vw的唯一缺点就是不是所有的浏览器版本都兼容。但是大部分都支持，支持比例在96%以上。

img202206210003624

Screen Shot 2022-06-21 at 12.06.38 AM

SCSS 响应式（下）

SCSS 里的媒体查询更厉害哦。

如何让网页在不刷新的情况下，用一个页面即适应手机又适应PC，

ul>li*4>a[href=#]

==========>
<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
</ul>

Screen Shot 2022-06-24 at 1.04.47 AM

👆这张图中，只有当鼠标放在字上面才可以点击，因为a标签的border只包住了字，如果希望整个区域都能点击到，所以应该把padding放到a标签里面就可以了。

但是，由于a标签是內联元素，所以添加上下padding是没有用的，需要把a标签变成inline-block，这样就可以了。

Screen Shot 2022-06-24 at 1.07.39 AM

背景渐变可以网上搜css gradient generator， 找w3c标准的css代码即可。

flex-shrink：用来防止压缩

比如下面这个，如果不加的话，字就会被压缩到下一行，加了之后就不会压缩。

img202206240124115

Screen Shot 2022-06-24 at 1.25.45 AM

meta:vp

=====>
摁tab之后可以生成

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@content就是你要写的内容

@mixin phone{
 @media (max-width:500px){
  @content
 }
}

@include phone{
    > ul{
      display:none;
    }
    .menu{
      display: block;
    }
  }

codesandbox

webpack4、@mixin、% 和 @function

在手机端/APP学习本课

1. 用法

2. 联系

3. 区别

我跳过了webpack4，直接从@mixin开始

mixin