动态

详情 返回 返回

Less基礎使用秘籍，讓你的CSS更高效！ - 动态 详情

Less（Leaner Style Sheets 的縮寫) 是一門向後兼容的 CSS 擴展語言。，它擴展了CSS（層疊樣式表）的功能並提供了更靈活、更強大的樣式定義和管理機制。通過使用 Less，開發人員可以編寫可維護、可重用的樣式代碼，並以簡潔的語法實現複雜的樣式效果。本文將介紹 Less 的基本概念和特性，以及如何使用它來簡化 CSS 開發過程。想要學習更多的知識，可訪問 犀牛書 的 Less 中文文檔。

安裝

要安裝 Less，首先需要確保本地已安裝 Node.js 環境，然後運行如下命令，將 Less 安裝到系統的全局環境中：

npm install less -g

安裝完畢，可在控制枱運行命令lessc -v，如果出現相關的版本信息，説明已經安裝成功。

編譯運行

在 IED 編輯器如 Vscode 中，新建一個以 .less 為後綴的文件，文件內容可放入如下 Less 格式的樣式元素。

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

.less文件建立完畢並填寫內容後，下一步可用命令lessc [option option=parameter ...] <source> [destination]將其編譯為以.css為後綴的文件。例如，要將 index.less 編譯為 index.css，可用如下命令：

lessc index.less index.css

編譯完成後，即可生成 .css 文件，詳情如下圖所示：

基本用法

變量（Variables）

用@聲明變量並使用：

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

輸出：

#header {
  width: 10px;
  height: 20px;
}

瞭解更多關於變量的信息...

混合（Mixins）

混合（Mixins） 是一種將一個規則集中的一堆屬性包含（或混入）到另一個規則集中的方法。因此，假設我們有以下類：

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

我們想在其它規則集中使用這些屬性，我們只需要在我們想要屬性的地方放入類（class）的名稱，就像這樣：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

.bordered 類的屬性現在將出現在 #menu a 和 .post a 中。（請注意，你還可以使用 #ids 作為 mixins。）

瞭解更多關於 Mixins 的信息......

嵌套（Nesting）

Less 讓你能夠使用嵌套或者與級聯結合使用。假設我們有以下 CSS：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

在 Less 中，我們也可以這樣寫：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

生成的代碼更加簡潔，模仿了 HTML 的結構。

你還可以使用此方法將偽選擇器（pseudo-selectors）與混合（Mixins）捆綁在一起。下面是經典的 clearfix hack（清除浮動技巧），重寫為混合（Mixins）（& 表示當前選擇器父級）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

瞭解更多關於父級選擇器的信息......

嵌套規則和冒泡

可以像選擇器一樣嵌套 @media 或 @supports 等 @ 規則（at-rule）。At-rule 放在頂部，相對於同一規則集中的其它元素的相對順序保持不變，這稱為冒泡（bubbling）。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

輸出：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

運算（Operations）

算術運算符 +、-、*、/ 可以對任何數字、顏色或變量進行運算。如果可能，算術運算符在加、減或比較之前會進行單位換算。計算的結果以最左側操作數的單位類型為準。如果單位換算無效或失去意義，則忽略單位。無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換。

// 數字轉換為相同的單位
@convert: 5cm + 10mm; // returns 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 結果是 4px

// 帶變量的示例
@base: 5%;
@filler: @base * 2; // returns 10%
@other: @base + @filler; // 結果是 15%

乘法和除法不會轉換數字。在大多數情況下這是沒有意義的，一個長度乘以一個長度就得到一個區域，而 CSS 是不支持指定區域的。Less 會按照數字的原樣進行操作，並將明確聲明的單位類型分配給結果。

@base: 2cm * 3mm; // 結果是6cm

你還可以對顏色進行算術運算：

@color: (#224488 / 2); // 結果是#112244
background-color: #112244 + #111; // 結果是#223355

當然，你可能會發現 Less 的 色彩函數 更有用。

calc() 特例

_發佈於 [[v3.0.0]](https://github.com/less/less.js/blob/master/CHANGELOG.md) _

為了與 CSS 兼容，calc() 不會計算 Math 表達式，但會計算變量和嵌套函數中的 Math 表達式。

@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 結果是 calc(50% + (25vh - 20px))

轉義（Escaping）

轉義（Escaping）允許你將任何任意字符串用作屬性或變量值。~"anything" 或 ~'anything' 中的任何內容都會原樣使用，除了 插值。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

結果為：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

注意，從 Less 3.5 開始，你可以簡單地編寫為：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

在 Less 3.5+ 版本中，許多以前需要“引號轉義”的情況不再需要。

函數（Functions）

Less 提供了各種函數，可以轉換顏色、操作字符串和進行 Math 計算。它們在 Less 函數手冊 中有完整的文檔。

使用它們非常簡單。以下示例使用 percentage 函數（百分比）將 0.5 轉換為 50％，將顏色的飽和度增加 5％，然後將背景顏色設置為亮度增加 25％並旋轉 8 度：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // 返回 `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

參見：函數參考

命名空間和訪問器

不要與 CSS @namespace或 命名空間選擇器（namespace selectors 混淆。

有時，出於組織結構或僅僅是為了提供一些封裝的目的，你希望對混合（mixins）進行分組。你可以用 Less 更直觀地實現這一需求。假設你想要在 #bundle 下捆綁一些混合（mixins） 和變量，以供以後重用或分發：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab {
    ...;
  }
  .citation {
    ...;
  }
}

現在，如果我們想在 #header a 中混入 .button 類，我們可以這樣做：

#header a {
  color: orange;
  #bundle.button(); // 也可以寫成 #bundle > .button
}

注意：如果你不希望命名空間（例如 #bundle()）出現在 CSS 輸出中，可以將 () 添加到命名空間末尾，即 #bundle .tab。

映射（Maps）

從 Less 3.5 開始，你還可以使用混合（mixins） 和規則集（rulesets） 作為值映射。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

這將輸出預期結果：

.button {
  color: blue;
  border: 1px solid green;
}

參見： 映射（Maps）

作用域（Scope）

Less 中的作用域與 CSS 非常相似。變量和混合（mixins） 首先在本地查找，如果找不到，則從“父”作用域繼承。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

與 CSS 自定義屬性一樣，混合（mixin）和變量定義不必放置在引用它們的行之前。因此，以下 Less 代碼與前面的示例相同：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

參見：懶加載

註釋（Comments）

可以使用塊樣式和行內註釋：

/* 一個塊註釋s
 * 樣式註釋！ */
@var: red;

// 單行註釋
@var: white;

導入（Importing）

導入的工作方式與預期基本相同。你可以導入 .less 文件，並且其中的所有變量都將可用。對於 .less 文件，擴展名是可選的。

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

瞭解更多關於導入的信息......

總結

以上介紹了 Less 的基本使用，在項目的構建過程中，基本上都能用得上，如果想要更深入的學習，可訪問 犀牛書 的 Less 中文文檔。

知識擴展：

  • ChatGPT 插件應用場景有哪些？
  • OpenAI 服務在所在國家不可使用問題解決方案
開發 , 前端 , less , 後端 , 程序員
user avatar anchen_5c17815319fb5 头像 sy_records 头像 cynthia_59675eba1a2ee 头像 q_bit 头像 hu_qi 头像 bianchengsanmei 头像 ranck 头像 jingzhexiaoyu 头像 shenfq 头像 huobaodechahu 头像 chen_67f9ccbe6f07b 头像 liuruian 头像
点赞 19 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.