scss

若曦1
109 阅读1分钟

选择器

插槽选择器 :slotted(.m-tip) { margin: 16px 40px 24px; }

js使用scss变量

image.png必须带.module不然引入时打印出来时字符串（此时是对象） 定义变量 :export {

  yellow: var(--m-bg-f8f8f81);

} js使用变量 import config from '@/style/global.module.scss'; image.png

嵌套属性

image.png

占位符 选择器

image.png

image.png

变量

css

image.png

scss 1.全局变量

image.png 2.表示同一个变量

image.png 3.局部变量 变全局变量

image.png 4.默认值

image.png

导入

css

image.png scss

image.png

继承(继承比混入编译出来的代码精简)

image.png

占位符选择器(%)

image.png

混入mixin

image.png

image.png 混入传参

image.png 指定传参

image.png 指定默认值

image.png

运算符

image.png

image.png

插值语句(属性名 用变量)

image.png

if else

image.png

三元运算符

image.png 如果真,第一个颜色值生效 如果假,第二个颜色值生效

for(to不包含end through包含end)

image.png

each

image.png

while

image.png

函数

image.png

image.png

展开赋值

image.png

image.png

混入和函数的区别

image.png

scss里引入scss文件

image.png

image.png image.png

image.png 或 import 引入多个scss 后面方法覆盖前面方法即后面方法生效 image.png (use引入重复文件会报错,import引入的时候会重复编译不会报错)

多层引入 想使用多层里变量 要forward转发

image.png 转发/不转发指定方法

image.png

当两个scss里含有同名方法

image.png 加前缀 方法也要加前缀 image.png 改变默认值

image.png

image.png forward和use连用(注意引用顺序)

image.png

跳出嵌套 at-root

image.png

image.png rule是默认

image.png all

image.png

media

image.png

avatar
文章
阅读
粉丝