less都不懂，怎麼混前端?

時間  2020-03-01
標籤 不懂 怎麼 前端 简体版
原文   原文鏈接

前言

本篇博客將會詳細描述less的常見用法，適合入門的新手。css

學習less，Why？

  1. 等你用了以後你就會發現它用起來確實比原生CSS方便不少。好比說：可以大量的簡化重複的代碼、經過定義全局變量的方法方便往後代碼維護。
  2. 前端流行的不少UI框架好比說bootstrape(V4以前的版本)，iview等等，CSS的源碼都是用的less。
旺財："less可以大量的簡化重複的代碼能舉個例子？"
問渠："閱讀bootstrape源碼，按鈕樣式的實現用less語法只須要168行，而用CSS語法寫須要439行"

less這玩意怎麼開始用呢

方式一：在瀏覽器裏面直接引入能夠解析less語法的js文件，來瞧瞧下面一個例子；less.min.js文件請到官網下載html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less001</title>
<!-- 注意type="text/less"依賴的js才能正確解析 -->
<style type="text/less">
    @width: 100px;
    @height: @width + 10px;

    .header {
      width: @width;
      height: @height;
      background-color:red;
    }
</style>
</head>
 
<body>
    <div class="header">
        1234567890
    </div>
</body>
<!-- 依賴的less.min.js文件必須放在要解析的less語法後面纔能有效 -->
<script src="./less.min.js"></script>
</html>

方式二：經過開發工具自身的支持，好比koala；前端

方式三：node.js曉不曉得？高端玩家都用這個；node

第一步：全局環境下安裝less編譯器
npm install -g less
第二部：lessc 須要編譯的文件名稱 編譯後的文件名稱
lessc 001.less 001.css
001.less文件內容：
@width: 100px;
@height: @width + 10px;

.header {
  width: @width;
  height: @height;
  background-color:red;
}
用html文件中引入編譯後的001.css文件查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less003</title>
<link type="text/css" rel="stylesheet" href="./001.css" />
</head>
 
<body>
    <div class="header">
        方式三：1234567890
    </div>
</body>

</html>

方式四：在webpack打包工具中使用；webpack

npm i less less-loader --save-dev

less變量

//讓咱們先看一段less編譯前的代碼：
@color:red;
@selector: .header;
@srcName: width;
@{selector}{
  @{srcName}: 200px;
  height: 200px;
  background-color:@color;
}

//如下是編譯後的代碼：
.header {
  width: 200px;
  height: 200px;
  background-color: red;
}

由此咱們須要知道以下用法：web

  1. CSS語法在less文件中都支持
  2. 變量的聲明方式：@變量名 【例如@color】
  3. 變量的聲明通常用於屬性值，例如上例中的@color用於聲明background-color的屬性值
  4. 變量也能夠聲明屬性名和選擇器等（但通常不會這麼用），使用方式是@{變量名}【例如上例中的@selector，@srcName】

less中的註釋

編譯前的less文件：
//開頭的註釋，不會編譯到css文件中
/*包裹的註釋，編譯到css文件中*/ 
.header{ 
  height: 200px;
}

編譯後的css文件：
/*包裹的註釋，編譯到css文件中*/
.header {
  height: 200px;
}
  1. less文件中， //開頭的註釋，不會編譯到css文件中
  2. less文件中， /**/包裹的註釋，能夠編譯到css文件中

less中的嵌套規則

//假設有以下HTML片斷
<div class="header">
    <div class="nav">123</div>>
    <div class="logo">456</div>>
</div>
    
//對應的有以下css代碼：
.header {
  font-size: 12px;
}
.header .nav {
  float: left;
  background-color: red;
}
//.nav { //沒有.header的前綴
//  float: left;
//  background-color: red;
//}
.header .logo {
  float: left;
  width: 300px;
}

以上代碼存在嵌套關係，即類nav和類logo是header的子類，可是代碼結構卻沒有體現出來；若是代碼是小白寫的（註釋的那一段），類nav沒有加上前綴header，那就更加可怕了，看下面less如何實現npm

//帶有嵌套規則的less代碼：
.header {  
  font-size: 12px;
  .nav {
      float:left;
      background-color:red;
  }
  .logo {
      float:left;
      width: 300px;
  }
}

less可以容許咱們像寫html結構代碼同樣去寫css代碼。可是在使用嵌套的時候有兩種狀況須要注意：bootstrap

一: &表明當前選擇器的父級；當你使用僞元素的時候，前面若是沒有具體選擇器，編譯後僞元素前面會有空格，致使樣式代碼不生效，這個時候能夠在僞元素前面加上&。瀏覽器

//:hover、 :after、 :focus...各類僞元素都逃不了在前面加&或者選擇器
&:hover {      
      background-color:green;
  }

二： 在前面變量部分咱們說過@符號在less語法中是用於定義變量的。可是在實際過程當中css自身語法中@就有特定的用法，好比說@media表示媒體查詢，這樣的話就和less語法衝突了。less解決方案是把css自身的@語法放到其它語法前面以下：app

//less語法
.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;
  }
}

//編譯後的css語法
.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;
  }
}

less中的混合

旺財:"你不是說用less可以大量的簡化重複的代碼嗎？我看着代碼咋那麼麻煩呢？"
問渠："以前的語法只是鋪墊，less混合這個功能十分強大，保證完成簡化代碼的任務"

混合的做用有點相似於函數，可以經過調用混合名稱，獲取一堆預先定義的規則屬性，而不用再去寫重複的代碼，具體看下案例。 基本用法以下,咱們一一來分析下：

  1. 混合的基本使用
  2. 不帶輸出的混合
  3. 混合的參數用法
  4. 混合的參數添加默認值
  5. 命名參數
  6. 匹配模式
//1. 混合的基本使用
//假設有以下代碼：
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}
.div2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

//很明顯這段代碼中除了背景顏色不同以外，其它的代碼都是相同的，那麼就能夠達到公用的目標
//用less的混合語法能夠改寫成以下形式
.less-mixins{
    float:left;
    width:200px;
    height:200px;
}

.div1{
    .less-mixins;
    background-color:green;
}

.div2{
    .less-mixins;
    background-color:red;
}

//最終編譯後的css代碼
.less-mixins {
  float: left;
  width: 200px;
  height: 200px;
}
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}
.div2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

混合的基本使用以下：
A、定義的混合爲.less-mixins，有沒有感受就行定義類同樣
B、引用定義的混合方式爲.less-mixins，即直接寫上類名便可
C、不用懷疑，你沒有看錯，編譯後的css代碼中還有混合.less-mixins（這部分代碼是多餘的，接下來的案例就是去除這部分無效代碼）

//2. 不帶輸出的混合
//less代碼改成以下：
.less-mixins(){
    float:left;
    width:200px;
    height:200px;
}

.div1{
    .less-mixins;
    background-color:green;
}

.div2{
    .less-mixins;
    background-color:red;
}

//最終編譯後的css代碼
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}
.div2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

相對於上述案例，改變的只是在混合名稱後面加了一對小括號，再次編譯less文件就不會在生成的css文件中包含無效的混合定義

//3. 混合的參數用法
.less-mixins(@width,@height,@color){
    float:left;
    width:@width;
    height:@height;
    background-color:@color;
}

.div1{
    .less-mixins(200px,200px,yellow);    
}

.div2{
    .less-mixins(200px,300px,green);
}

//編譯後的css文件
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: left;
  width: 200px;
  height: 300px;
  background-color: green;
}

就像定義函數參數似的，上述(@width,@height,@color)就是定義的混合參數，在混合內部就可使用這些參數，調用混合傳參就像js語法中調用函數同樣

//4. 混合的參數添加默認值
.less-mixins(@width:100px,@height:100px,@color:red){
    float:left;
    width:@width;
    height:@height;
    background-color:@color;
}

.div1{
    .less-mixins(200px,200px,yellow);    
}

.div2{
    .less-mixins();
}

//編譯後的css
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

混合的參數默認值添加，只須要在變量名稱後面加上:默認值便可。可是有木有發現問題，假設我調用的混合的時候只傳入一個參數怎麼辦？或者入參小於實參怎麼辦呢？

//5. 命名參數
.less-mixins(@width:100px,@height:100px,@color:red){
    float:left;
    width:@width;
    height:@height;
    background-color:@color;
}

.div1{
    .less-mixins(200px,200px,yellow);    
}

.div2{
    .less-mixins(@color:green);
}

//編譯後的css
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: green;
}

上述咱們在調用混合的時候爲.less-mixins(@color:green)，經過@color:來指定我要傳入的是哪一個參數。

//6.匹配模式
.less-mixins(L,@width:100px,@height:100px,@color:red){
    float:left;
    width:@width;
    height:@height;
    background-color:@color;
}

.less-mixins(R,@width:100px,@height:100px,@color:red){
    float:right;
    width:@width;
    height:@height;
    background-color:@color;
}

.div1{
    .less-mixins(L,200px,200px,yellow);    
}

.div2{
    .less-mixins(R,@color:green);
}

//編譯後的css文件
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: right;
  width: 100px;
  height: 100px;
  background-color: green;
}

混合.less-mixins定義了兩次，這兩次的功能除了浮動的方向不一致以外其它都是相同的（固然這裏也能夠定義成兩個變量名），這種狀況要想區分調用哪次混合的定義，須要在調用混合的時候，指定第一個參數匹配字符串。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程