前端【CSS】22【css变量】【scss变量】【less变量】【样式预处理器】【sass、scss、stylus、less、css】【:deep深度选择器】

css变量

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <title>Document</title>
 9   <style>
10     /* 1. 声明变量 */
11     :root {
12       --myColor: blue;
13     }
14 
15     /* 2. 使用变量 */
16     .box {
17       color: var(--myColor);
18     }
19 
20     .box1 {
21       background-color: var(--myColor);
22     }
23 
24     .box2 {
25       border: 1px solid var(--myColor);
26     }
27   </style>
28 </head>
29 
30 <body>
31   <div class="box">文字</div>
32   <div class="box1">文字</div>
33   <div class="box2">文字</div>
34 </body>
35 </html>

样式预处理器

　　less sass stylus 都是 css 预处理器，语法上稍有差异，作用一样

　　都是让 css，增强能力，具备变量，函数.. 的能力

  • sass的语法两种语法 .sass 和 .scss

    • .sass 和 .stylus 语法很像 (了解)
    • 要求省略 {} 和 分号， 缩进表示嵌套
    • 使用 $变量名: 变量值   定义变量，  示例：  $base: red    (后面不要分号)
1 <style lang="sass">
2 // sass 和 stylus 的语法基本一样（要求去掉花括号和分号）
3 .outer
4   background-color: pink
5   padding: 10px
6   .inner
7     background-color: red
8 </style>

  • .scss 和 .less 语法很像， 都支持嵌套, 变量......

    • scss 声明变量：$变量名    (不省略{}和分号)
    • less 声明变量:  @变量名
 1 <style lang="scss">
 2 // scss和less特别像，稍有差异
 3 $color: red;
 4 
 5 .outer {
 6   background-color: $color;
 7   padding: 20px;
 8   .inner {
 9     background-color: blue;
10   }
11 }
12 </style>

 深度选择器

 1 <style lang="scss" scoped>
 2 :deep() {
 3   .van-nav-bar__arrow {
 4       color: var(--cp-text1);
 5       font-size: 18px;
 6     }
 7     .van-nav-bar__title {
 8       font-size: 15px;
 9     }
10   }
11 }
12 </style>
13 
14 // 等同于
15 <style lang="scss" scoped>
16 :deep() { // 深度选择器
17   .van-nav-bar {
18     &__arrow {  // &表示拼接的意思
19       color: var(--cp-text1);
20       font-size: 18px;
21     }
22     &__title {
23       font-size: 15px;
24     }
25   }
26 }
27 </style>

样式穿透

css样式穿透

1 <style scoped>
2   父元素 >>> 子元素 {
3      color: red;
4   }
5 </style> 

less样式穿透

1 <style lang="less" scoped>
2   父元素 /deep/  子元素 {
3      color: red
4   }
5 </style>

scss样式穿透

1 <style scoped>
2   父元素::v-deep  子元素 {
3      color: red
4   }
5 </style>

 

在不同预处理器下定义变量

 1   /* 在css中定义变量，以--开头，并且必须写到某个选择器中，不能直接写在外面 */
 2   --primary-color: gold;
 3   /* 在SCSS定义变量语法，以$开头 */
 4   $primary-color: gold;
 5   /* 在LESS定义变量语法，以@开头 */
 6   @primary-color: gold;
 7 
 8 
 9 
10 
11 // 使用
12 body {
13   /* CSS使用变量 */
14   color: var(--primary-color)
15   /* CSS使用变量 */
16   color: $primary-color
17   color: @primary-color
18 }

 

posted @ 2024-04-09 11:02  为你编程  阅读(75)  评论(0)  编辑  收藏  举报