less 使用特性 - &

Cobub 發(fā)布于2019-08-29 11:13 / 1480人閱讀

實例一

a {
  color: blue;
  &:hover {
    color: green;
  }
}

output:

a {
  color: blue;
}

a:hover {
  color: green;
}

實例二

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

output:

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

實例三

.link {
& + & {

color: red;

}

& & {

color: green;

}

&& {

color: blue;

}

&, &ish {

color: cyan;

}
}

output:

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

GPU云服務(wù)器云服務(wù)器 html使用less less less2 linux密令less

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111503.html

相關(guān)文章

前端入門23-CSS預(yù)處理器（Less&amp;Sass）

摘要：聲明聲明本篇內(nèi)容梳理自以下幾個來源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個時候，預(yù)處理器就出現(xiàn)了，其實應(yīng)該是說和這類語言出現(xiàn)了。聲明本篇內(nèi)容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網(wǎng)站的 less 文檔 Sass中文網(wǎng) 感謝大佬們的分享。正文-CSS預(yù)處理（less&Sass） CSS預(yù)處理什么是 CSS 預(yù)處理？為什么要有 CSS 預(yù)處理？這...

freecode 2019-04-23 13:07 評論0 收藏0
react項目關(guān)于webpack配置修改

一、前言通過CRA腳手架構(gòu)建的項目，一般webpack配置是隱藏的，如果要修改，就要另外處理。想要修改webpack通常有兩種方式通過插件去增加或覆蓋webpack配置（方法一、方法二）或者釋放項目中的webpack配置，使之可見，然后可以修改（方法三）本來CRA腳手架將webpack等復(fù)雜的配置封裝在項目中，后續(xù)可以通過更新react-scripts來體驗版本升級帶來的新特性，但有些時候確實需要...

社區(qū)管理員 2022-10-08 14:54 評論0 收藏0
關(guān)于react+antd樣式不生效問題的解決方式

　　1、下面是添加antd組件樣式不生效代碼　　在入口文件中引入import'antd/dist/antd.css' 　　樣式生效，但是生成警告　　WARNINGin./node_modules/antd/dist/antd.css 　　Failedtoparsesourcemap:'webpack://antd/./components/time- 　　picker/s...

3403771864 2022-09-13 22:19 評論0 收藏0
Next.js踩坑入門系列（二）— 添加Antd &amp;&amp; CSS

摘要：踩坑入門系列一二添加三目錄重構(gòu)再談路由陸續(xù)更新個人對于腳手架的有一種執(zhí)念，如果搭建出來就是一個首頁標(biāo)簽跳轉(zhuǎn)，實在不是我這個處女座的風(fēng)格，因此第二步我就想引用框架，相信很多使用的開發(fā)者用的也都是這個框架吧。 Next.js踩坑入門系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目錄重構(gòu)&&再談路由陸續(xù)更新... 個人對于腳手架的UI有一種執(zhí)...

lifesimple 2019-08-23 11:38 評論0 收藏0