less學習

来源:http://www.cnblogs.com/miaowwwww/archive/2016/12/10/6157941.html
-Advertisement-
Play Games

...


// 1.變數:顏色可做+-
    // from
    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    #header { color: @light-blue; }
    // to
    #header { color: #6c94be;}

// 2.混入(Mixins),#id,.class的樣式直接添加
    // from
    .bordered {
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
    }
    #backgroundcolor {
        background-color: #fcf;
    }
    #menu a {
        color: #111;
        .bordered;
        #backgroundcolor;
    }
// 2.1 帶參數混入
.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}
// 3.嵌套規則
    // from
    #header {
        color: black;
        .navigation {
            font-size: 12px;
        }
        .logo {
            width: 300px;
        }
    }
    // to
    #header {
        color: black;
    }
    #header .navigation {
        font-size: 12px;
    }
    #header .logo {
        width: 300px;
    }
    // 套用偽類
    .clearfix {
        display: block;
        zoom: 1;

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

// 4.運算:任何數字、顏色或者變數都可以參與運算。
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

// color: #888 / 4;
// background-color: @base-color + #111;
// height: 100% / 2 + @filler;

// 5.函數 percentage, saturate, spin, lighten
@base: #f04615;
@width: 0.5;

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

// 6.命名空間和訪問器
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}
#header a {
  color: orange;
  #bundle > .button;//引入
}

// 7.作用域:擁有塊級作用域{}
@var: red;
#page {
    @var: white;
    #header {
        color: @var; // white
    }
}
#footer {
    color: @var; // red
}
// 8.導入import, 同一個文件只能導入一次,@import xx 只有第一次語句有效
@import "lib.css";
@import "lib"; //lib.less;
@imported-color: red;
h1 { color: green; }

@import "library.less" screen and (max-width: 400px); // 通過media query指定的import
@import "library.less"; // 無media query的import

.class {
    color: @importedColor; // 使用導入的變數
}
// to
// 對應通過media query指定的import
@media screen and (max-width: 400px) {
    h1 { color: green; }
}

// 對應無media query的import
h1 { color: green; }
.class {
    // 使用導入的變數
    color: #ff0000;
}
// 8.1 在規則中導入
pre {
    @import "library.less";
    color: @importedColor;
}

// 9.字元串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
// 10.選擇器插值
@name: blocked;
.@{name} {
    color: black;
}
// 11.media query作為變數
@singleQuery: ~"(max-width: 500px)";
@media screen, @singleQuery {
    set {
        padding: 3 3 3 3;
    }
}
// to
@media screen, (max-width: 500px) {
    set {
        padding: 3 3 3 3;
    }
}

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 相關知識自行搜索,直接上乾貨。。。 使用的資源: nginx主伺服器一臺,nginx備伺服器一臺,使用keepalived進行宕機切換。 tomcat伺服器兩台,由nginx進行反向代理和負載均衡,此處可搭建伺服器集群。 redis伺服器一臺,用於session的分離共用。 nginx主伺服器:19 ...
  • HTTP API介面安全設計 API介面調用方式 HTTP + 請求簽名機制 HTTP + 參數簽名機制 HTTPS + 訪問令牌機制 有沒有更好的方案? OAuth授權機制 OAuth2.0服務的幾種授權流程 ... ...
  • 這個小案例主要是對transform的應用。 時鐘的3個表針分別是3個png圖片,通過setInterval來讓圖片轉動。時,分,秒的轉動角度分別是30,6,6度。 首先,通過new Date函數獲取當前時間,通過date.getSeconds(),date.getMinutes(),date.ge ...
  • js的this是什麼?關於這個東西,博客園裡面有太多的解釋了,不過,本人看了一下,感覺對this解釋的有點複雜了,因此,本人在此給this一個簡單易於理解的定義。 this其實是js的一個對象,至於是什麼對象呢?很簡單,this這個對象就是:誰調用它它就指向誰。 關於這一點,其實,博客園的文章已經說 ...
  • 想給訂閱號做一個網頁,如果進入後發現沒關註微信公眾號就提示關註。但是微信對訂閱號做了限制,無論是否認證都是不能網頁授權獲取用戶信息的,這就給網頁內直接判斷用戶是否關註該訂閱號造成了困難。 解決這個問題通過另一個網站授權或認證的服務號間接完成以下以認證的服務號為例說明下如何在網頁中判斷訂閱號是否被關註 ...
  • 一、獲取內聯樣式 在這種情況下,獲取和設置樣式只靠style屬性就可以,因為element.style屬性返回的是類似數組的一組樣式屬性及對應值,因此訪問具體樣式的時候可以採取兩種方式即“ele.style.屬性名稱”和“ele.style['屬性名稱']”。但是,要註意的是,針對css樣式里bac ...
  • 眼看就要期末了,我的專業課也迎來了第二次的期末作業 《網上購物系統》。雖然老師的意圖是在鍛煉我們後臺的能力,但是想著還是不利用網上的模板,準備自己寫,以來別人寫的靜態頁看不懂,再著可以鍛煉自己做網頁的能力。所以趁有點小進展就想分享自己的作業進展狀態。下麵是我頁面運行的截圖。 可能粘貼的圖片沒有任何的 ...
  • BFC 在上一篇文章中, "清除浮動方法解析" ,我們談及了一些使用css屬性解決浮動帶來的影響。但是在解決浮動帶來的影響的方法中,如果細心思考,會產生如下疑問: 為什麼 可以清除浮動帶來的影響? 能否用其他css屬性清除浮動帶來的影響? 種種的疑問,會讓你覺得CSS真的不容易精通,說精通過於高大上 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...