likes
comments
collection
share

saas和less不同于普通css的地方

作者站长头像
站长
· 阅读数 22

“这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战”

什么是CSS变量？

自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）

CSS变量和Less等预处理工具有什么区别？

CSS变量为我们带来一些预处理器的便利，并且不需要额外的编译。Less在webpack中需要添加less-loader进行处理。

Less使用的变量存在一个主要缺点，即它们是静态的，并且无法在运行时进行更改。但是CSS变量支持JS进行动态的修改。

CSS变量的用法入门

:root {
  --main-color: #06c;
}

#foo h1 {
  color: var(--main-color);
}

--main-color是自定义变量名，变量值为＃06c。请注意，所有自定义变量均以两个破折号开头。

var() 函数检索自定义变量名并将其替换为自定义变量值，从而产生颜色：＃06c，只要在样式表中 h1 父级某个位置定义了变量，它就可以在 var 函数使用。

自定义属性受级联的约束，并从其父级继承其值。通过在 :root 伪类上设置CSS变量，然后在整个文档需要的地方都可以使用。

请注意，自定义属性区分大小写，因此 --header-color 和 --Header-Color 是不同的CSS变量。

通过媒体查询动态修改变量然后设置页面的边距。

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

在JavaScript中修改CSS变量，动态的修改样式颜色。

<head>
  <style>
    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    }
</style>
</head>
<p>hello world</p>
<script>
  let styles = getComputedStyle(document.documentElement)
  let value = styles.getPropertyValue('--primary-color') // 获取样式
  document.documentElement.style.setProperty('--primary-color', 'green'); // 重新设置样式
</script>

关于样式的几个属性和方法在这里回顾一下。

任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。这个style 对象是CSSStyleDeclaration 的实例，包含着通过HTML 的style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。

<head>
  <!-- 不包括link标签的样式 -->
  <link rel="stylesheet" href="./reset.css">
  <!-- 不包括style标签的样式 -->
  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <!-- 包括dom元素的style属性样式 -->
    <div class="box" id="box" style="color: red;"></div>
  </div>

  <script>
    const box = document.getElementById('box')
    console.log(box.style.color) // red
  </script>
</body>

style 对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时，也可以修改样式。

  • getPropertyValue(propertyName)：返回给定属性的字符串值。
  • removeProperty(propertyName)：从样式中删除给定属性。
  • setProperty(propertyName,value,priority)：将给定属性设置为相应的值。

通过cssText 属性可以访问style 特性中的CSS代码。在读取模式下，cssText 返回浏览器对style特性中CSS 代码的内部表示。在写入模式下，赋给cssText 的值会重写整个style 特性的值；也就是说，以前通过style 特性指定的样式信息都将丢失。

<head>
  <!-- 不包括link标签的样式 -->
  <link rel="stylesheet" href="./reset.css">
  <!-- 不包括style标签的样式 -->
  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <!-- 包括dom元素的style属性样式 -->
    <div class="box" id="box" style="color: red;"></div>
  </div>

  <script>
    const box = document.getElementById('box')
    box.style.background='red'
    console.log(box.style.cssText) // color: red; background: red;
  </script>

</body>

虽然style 对象能够提供支持style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。

获取计算的样式使用getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。

  <script>
    const box = document.getElementById('box')
    console.log(getComputedStyle(box).height) // 100px
  </script>

用过sass或less的都知道，主要他们可以有嵌套和变量以及函数功能，其实在原生css中，已经开始逐渐支持，但是语法不够强大，比如无法嵌套书写。而且由于css变量浏览器的兼容问题一直没有被广泛使用。

saas和less不同于普通css的地方

使用saas和less预处理器的优点

  • 提供CSS层缺失的样式层复用机制
  • 减少冗余代码
  • 提高样式代码的可维护性

saas和less预处理器提供了变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

转载自:https://juejin.cn/post/7064107960795922463
评论
请登录