Less语法学习-未完待续

冷不防 2021-09-16 17:10 604阅读 0赞

Less语法学习

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

变量

说明：声明变量的时候，使用@开头，并且对于声明的变量，可以进行运算。注意：变量实际上是“常量”，因为它们只能定义一次。举例如下：

  1. @nice-blue: #5B83AD;
  2. @light-blue: @nice-blue + #111;
  4. #header {
  5.   color: @light-blue;
  6. }

输出：

  1. #header {
  2.   color: #6c94be;
  3. }

混入

Mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集中的方法。

  1. .bordered {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }

我们希望在其他规则集中使用这些属性。好吧，我们只需要删除我们想要属性的类的名称。

  1. #menu a {
  2.   color: #111;
  3.   .bordered;
  4. }
  6. .post a {
  7.   color: red;
  8.   .bordered;
  9. }

嵌套规则

Less使您能够使用嵌套代替或与级联结合使用。另外，将伪选择器与mixin捆绑在一起。经典的clearfix hack，重写为mixin（&代表当前的选择器父级）：

  1. #header {
  2.   color: black;
  3.   .navigation {
  4.     font-size: 12px;
  5.   }
  6.   .logo {
  7.     width: 300px;
  8.   }
  9. }

转化后：

  1. #header {
  2.   color: black;
  3. }
  4. #header .navigation {
  5.   font-size: 12px;
  6. }
  7. #header .logo {
  8.   width: 300px;
  9. }

与伪选择器结合使用，举例：

  1. .clearfix {
  2.   display: block;
  3.   zoom: 1;
  5.   &:after {
  6.     content: " ";
  7.     display: block;
  8.     font-size: 0;
  9.     height: 0;
  10.     clear: both;
  11.     visibility: hidden;
  12.   }
  13. }

嵌套指令和冒泡

media或keyframe可以以与选择器相同的方式嵌套指令。指令位于顶部，相对于同一规则集内其他元素的相对顺序保持不变。这叫做冒泡。
有条件的指令，例如@Media，@supports也@document有选择器复制到他们的身体：
个人通俗理解：选择器（.screen-color）写在最外面，内部的@media嵌套可以理解为 “&” ，即 and 。

  1. .screen-color {
  2.   @media screen {
  3.     color: green;
  4.     @media (min-width: 768px) {
  5.       color: red;
  6.     }
  7.   }
  8.   @media tv {
  9.     color: black;
  10.   }
  11. }

转化后：

  1. @media screen {
  2.   .screen-color {
  3.     color: green;
  4.   }
  5. }
  6. @media screen and (min-width: 768px) {
  7.   .screen-color {
  8.     color: red;
  9.   }
  10. }
  11. @media tv {
  12.   .screen-color {
  13.     color: black;
  14.   }
  15. }

其余非条件指令，例如font-face或keyframes，被冒泡了。他们的身体没有改变：

  1. #a {
  2.   color: blue;
  3.   @font-face {
  4.     src: made-up-url;
  5.   }
  6.   padding: 2 2 2 2;
  7. }

转化后：

  1. #a {
  2.   color: blue;
  3. }
  4. @font-face {
  5.   src: made-up-url;
  6. }
  7. #a {
  8.   padding: 2 2 2 2;
  9. }

操作

算术运算+，-，*，/可以在任意数量，颜色或可变的操作。如果可能，数学运算会考虑单位并在添加，减去或比较数字之前转换数字。结果最左边是明确说明的单位类型。如果转换不可能或没有意义，则忽略单位。不可能转换的示例：px到cm或rad到％。

功能

Less提供了各种功能，可以转换颜色，操纵字符串和进行数学运算。它们完全记录在函数参考中。
示例：使用百分比将0.5％转换为50％，将基色的饱和度增加5％，然后将背景颜色设置为减轻25％并旋转8度的颜色：

  1. @base: #f04615;
  2. @width: 0.5;
  4. .class {
  5.   width: percentage(@width); // returns `50%`
  6.   color: saturate(@base, 5%);
  7.   background-color: spin(lighten(@base, 25%), 8);
  8. }

命名空间和访问器（暂不理解）

范围（暂不理解）

评论（暂不理解）

输入

导入工作几乎与预期一致。您可以导入.less文件，其中的所有变量都可用。可以选择为.less文件指定扩展名。

  1. @import "library"; // library.less
  2. @import "typo.css";

可变插值

变量可控制CSS规则中的值，也可在其他地方使用，例如选择器名称，属性名称，URL和@import语句。

选择

  1. // Variables
  2. @my-selector: banner;
  4. // Usage
  5. .@{my-selector} {
  6.   font-weight: bold;
  7.   line-height: 40px;
  8.   margin: 0 auto;
  9. }

转化为：

  1. .banner {
  2.   font-weight: bold;
  3.   line-height: 40px;
  4.   margin: 0 auto;
  5. }

网址

  1. // Variables
  2. @images: "../img";
  4. // Usage
  5. body {
  6.   color: #444;
  7.   background: url("@{images}/white-sand.png");
  8. }

导入语句

  1. // Variables
  2. @themes: "../../src/themes";
  3. // Usage
  4. @import "@{themes}/tidal-wave.less";

属性

  1. @property: color;
  3. .widget {
  4.   @{property}: #0ee;
  5.   background-@{property}: #999;
  6. }

变量名称

使用变量定义变量

  1. @fnord:  "I am fnord.";
  2. @var:    "fnord";
  3. content: @@var;
  4. // 输出结果为content: "I am fnord.";

延迟加载（咱不理解）

默认变量

默认变量的请求 - 只有在尚未设置变量时才能设置变量。此功能不是必需的，因为您可以通过后面的定义轻松覆盖变量。这可以正常工作，因为延迟加载 - 基色被覆盖，深色是深红色。

  1. // library
  2. @base-color: green;
  3. @dark-color: darken(@base-color, 10%);
  4. // use of library
  5. @import "library.less";
  6. @base-color: red;

发表评论

表情：
评论列表 （有 0 条评论，604人围观）

还没有评论，来说两句吧...

相关阅读

    相关 17未完，18待续

    一个很短的序 昨天，在 2017 年最后一天跑了人生中第一次 10 公里，留下了 17 年最后的纪念。今天，在 2018 年第一天写下第一篇博客文章，开始新的人生旅程。

    Love The Way You LieLove The Way You Lie/ 0 赞/ 343 阅读

    相关 List接口（未完待续）

    List接口 List集合代表一个有序集合，集合中的每个元素都有其对应的顺序索引。 List集合允许使用重复元素，可以通过索引来访问指定位置的集合的元素。List集合默认按

    心已赠人心已赠人/ 0 赞/ 457 阅读