less和scss

天神下凡_
520 阅读5分钟

less语法

单位

绝对单位

相对单位

  • em

    • 参考当前容器的文字大小

  • rem

    • 参考根标签html标签的文字大小

  • %

媒体查询

查询不同的媒体设备进而应用不同的css样式

语法

  • @media (width: 300px) { html { font-size: 30px } }

移动端的适配

rem适配

  • 媒体查询的适配

    • 利用媒体查询针对于各个屏幕尺寸去设置一个不同的根标签字体大小。由于我们开发者书写的是一个固定的rem值，根据rem是要乘以根标签字体大小去计算的原理，即可实现适配
    • 缺点，书写起来过于麻烦

  • 手机淘宝团队封装的flexible.js框架配合px to rem插件快速实现适配

    • flexible.js

      • 利用js的方式给每一个屏幕尺寸都设置了一个根标签的字体大小（当前屏幕宽度的尺寸 / 10）
      • 引入方式 利用

    • 如何得到rem值？

      • ?rem * 37.5px = 你测量出的数值
      • ？rem = 测量出的数值 / 当前ui设计师给你的设计稿对应的根标签字体大小
      • 如果ui给你一张750的设计稿，2倍图，所以设计稿真实尺寸是 375 那么根标签字体大小应该是 37.5
      • 如果ui给你一640的设计稿，2倍图，所以设计稿真实尺寸是 320 那么根标签字体大小应该是 32

    • px to rem

      • alt + Z 可以快速将px->rem rem->px

vw适配

  • 后天再讲

less语法

css预处理语言

  • 由于浏览器不认识less文件，所以我们要对less文件做一个预处理操作，less编译成浏览器能够看懂的css文件。最后我们在html文件中引入的还是css文件

语法糖

  • 糖衣语法，便于开发者进行快速开发的语法规则。你按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率

常见的css预处理语言

  • less

    • @

  • sass、scss

    • 后面再讲

  • stylus

    • 没有符号

语法

  • 编译

    • easy less插件
    • 在保存时可以在同级目录自动生成一个同名的css文件

  • 注释

    • 单行注释

      • ctrl + /
      • 不会编译到css文件中

    • 块注释、多行注释

      • shift + alt + A

  • 变量

    • @自定义的变量名: 值;

    • 例子

      • @theme_color: #0a0;

    • 注意点

      • 变量结尾一定要有分号
      • 调用变量的时候也要带分号
      • 定义变量一般来说会写在整个文档的顶部

  • 导入

    • @import "你要引入的less文件路径";

    • 注意点

        1. 和变量语法极其类似，注意区分
        1. import 后面是空格 是空格 是空格 不是冒号 不是等号
        1. 导入的只能是less文件，如果路径有误，则无法编译
        1. 后缀名.less可省略
        1. 当A.less文件导入了B.less文件，在B.less文件修改了，需要在A.less中再次保存，才能编译到css文件中。

  • 嵌套

    • .box { .son{ width: 100px; &:hover { color: #00a; } } }

      • .box .son { width: 100px; } .box .son:hover{ color: #00a;

    • &可以去掉后代选择器的空格

      • 多应用于伪类、伪元素选择器

  • less中的计算

      • 乘法

    • /

      • 除法

      • /在css当中被视为分隔符

      • ./

        • 100px ./ 10
        • 100./10px

      • （）包裹除法的算式

        • (100px / 10px)

    • 如果有多个单位的话，则取第一个单位为最终单位

  • 导出

    • // out: ../css/

    • // out: false

      • 禁止导出

    • 注意当前代码只能写在第一行，以单行注释的方式出现

  • css压缩

    • // compress: true
    • 把输出的css文件进行压缩（去掉多余的换行空格和分号）
    • 减少css文件的体积

  • sourceMap

    • // sourceMap: true

    • 希望浏览器提示出less的行号

    • 连写

      • // compress: true, out: ../css/ , sourceMap: true

  • 拓展

    • mixins混入
    • 看代码

  • css原生语法中的运算

    • calc(100px + 100px);

    • 语法较为严格

      • 加法和减法运算符前后必须加空格

      • 单位是参与运算的

        • calc(100px + 100px);

          • 正确

        • calc(100px + 100);

          • 不正确

        • calc(100px * 100px);

          • 不正确

        • calc(100px * 100);

          • 正确

    • ie9以下是不支持的

vscode配置

标签配对高亮

  • Highlight Matching Tag

  • 需要在设置文件中键入当前代码

    • "highlight-matching-tag.styles": { "opening": { "name": { "highlight": "#ff0" } } }

括号配对高亮

  • 2021年12月vscode更新的功能
  • "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": true,

SCSS语法

官方文档

首先注意,这里的sass和我们的scss是什么关系

sass和scss其实是**一样的**css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。 两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。 而scss则和css的规范是一致的。

变量

sass使用$符号来标识变量

$highlight-color: #f90

上面我们声明了一个 名为$highlight-color的变量, 我们可以把该变量用在任何位置

#app {
    background-color:  $highlight-color;
}

以空格分割的多属性值也可以标识变量

$basic-border: 1px solid black;

#app {
    background-color:  $highlight-color;
    border: $basic-border
}

变量范围

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

# 编译后 

nav {
  width: 100px;
  color: #F90;
  background-color: black;
}

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

嵌套语法

和less一样,scss同样支持嵌套型的语法

#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }

转化后

#content article h1 {
  color: #1dc08a;
}

#content article p {
  font-style: italic;
}

#content aside {
  background-color: #f90;
}

&父选择器

假如你想针对某个特定子元素 进行设置

比如

  #content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &:hover { color: red }
      }
    }
    aside { background-color: #f90 }
  }

学到这里,我们会发现scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是@变量名, 而scss采用的$变量名

此时,我们再来看一下模板中的 styles/variables.scss

image-20201017230542301.png

上述文件,实际上定义了我们的一些基础数值,方便大家在某个文件统一的处理.

avatar
文章
阅读
粉丝