less入門

時間  2019-11-08
標籤 入門 简体版
原文   原文鏈接

前言

css的不足

  做爲前端界的三大基石，css是每個前端開發人員必需要會的，css做爲一門標記語言，給人的第一印象就是簡單易懂，沒有什麼邏輯性，和編程語言差距較大，短板很是明顯，當有新的屬性出來時個瀏覽器也不能同時兼容，爲了解決css這個短板，涌現出了一些預處理語言，他們讓css能夠使用變量，循環，集成，自定義方法等，讓其邏輯性大大加加強。css

預處理語言

  如今主要流行的有sass、less、stylus 三種html

  1. Sass 誕生於 2007 年，Ruby 編寫，其語法功能都十分全面，能夠說 它徹底把 CSS 變成了一門編程語言。另外 在國內外都很受歡迎，而且它的項目團隊非常強大 ，是一款十分優秀的預處理語言。
  2. Stylus 誕生於 2010 年，來自 Node.js 社區，語法功能也和 Sass 不相伯仲，是一門十分獨特的創新型語言。
  3. Less 誕生於 2009 年，受Sass的影響建立的一個開源項目。 它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充

預處理語言的選擇

  sass、less、stylus其實都差很少，在基本功能上也是大同小異，選擇less是比較適合初學者的，相比sass和stylus，less能讓你更快上手，less保留了全部css的功能個，學習成本低，另外less能夠在編輯器裏直接編譯，在電腦上安裝less後只需下載個小插件就能夠使用，vscode使用Easy Less擴展就能夠直接使用less。前端

正文

變量

  less定義變量的形式 @變量名:值，這樣就能夠定義一個變量。使用起來很是簡單，好比咱們能夠定義一個頁面的主色調@bgc，這樣在反覆用到給顏色的地方咱們就能夠直接使用，注意在css屬性中使用變量的時候須要把變量名用大括號包起來，這樣才能正確編譯。編程

/**
*@param: bgc 主色調
*@param: fsz 字體大小
*/
@bgc: RGB(88,190,203);
@fsz: 100px;
@wd: width;
@imgurl:"../img/";
html
{
    font-size: @fsz;
}

.wrap
{
    @{wd}: 7.5rem; //屬性中使用變量
    height: .89rem;
    background-color: @bgc;
    bckground-image: url("@{imgurl}/pic.jpg");//url中使用變量
}

//編譯成css
html {
  font-size: 100px;
}
.wrap {
  width: 7.5rem;
  height: .89rem;
  background-color: #58becb;
}
複製代碼

變量的做用域，當變量被屢次定義時，以最後一次定義爲準，且從當前做用域向上搜尋瀏覽器

//栗子
@bgc: #333;
.wrap
{
    @bgc: #339;
    .article
    {
        color: @bgc;
    }
}

//編譯css
.wrap .article {
  color: #339;
}

//變量是延遲加載的，不必定要在使用以前定義
@bgc: #333;
.wrap
{
    .article
    {
        color: @bgc;
    }
    @bgc: #339;
}

//同樣的結果
.wrap .article {
  color: #339;
}


複製代碼

混合（mixin）

混合的概念也很簡單.sass

//好比你寫一個border,而後在別的地方應引用它，less管這個叫混合
.border
{
    border: 1px solid #eee;
}
.tab
{
    width: .2rem;
    height: .1rem;
    .border;
}

//編譯成css就變成了
.border {
  border: 1px solid #eee;
}
.tab {
  width: .2rem;
  height: .1rem;
  border-top: 1px solid #333;
  border-bottom: 1px solid #eee;
  border: 1px solid #eee;
}

複製代碼

  固然也有更多好玩的用法，舉個栗子，這個和函數同樣，括號內定義參數，同時能夠給參數指定默認值，使用的時候也很簡單，直接在須要的地方調用就好，好比想給box加個1px，顏色是#eee的上邊框直接寫.border(top);就完成任務。（不多寫文章寫的不太好，畢竟叫less入門）less

.border(@direction,@num:1px,@color:#eee)
{
    border-@{direction} : @num solid @color;
}

.box
{
    width: 100px;
    height: 50px;
    .border(top);
}
複製代碼

模塊化

  less支持用import引入文件，也就相對有了模塊化的寫法，好比編寫一個head.less,只要在須要該樣式的less文件寫上import 「head.less」，在編譯出的css文件裏就有了head.less裏的樣式。編程語言

//global.less
@charset "utf-8";
*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    color: #333;
    font-family: "PingFang-SC-Medium" ,"sans-serif";
    background: rgba(0,0,0,0);;
}
//style.less
@charset "utf-8";
@import "global.less";
//style.less編譯出來後
@charset "utf-8";
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  color: #333;
  font-family: "PingFang-SC-Medium", "sans-serif";
  background: rgba(0, 0, 0, 0);
}
複製代碼

when

  less提供了when這個關鍵字功能，when很好理解就是一個判斷條件，只有當when的條件達到時纔會執行，廢話少說直接上代碼。編輯器

  咱們定義一個.area方法，width大於100px的時候加一個radius，小於等於一百的時候不加，注意這時候調用的時候會將100px轉化位數值和100比較，用的是unit函數，後面咱們會學到。模塊化

.area(@width) when (@width > 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
}

.box
{
    .area(200px);
}
//編譯後
.base-area {
  height: 100px;
  background: #ff6600;
}
複製代碼

這裏咱們還能夠使用嵌套來對代碼進行優化

.base-area
{
    width: @width;
    height: 100px;
}
.area(@width) when (@width > 100)
{
    .base-area;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    .base-area;
}

.box
{
    .area(200px);
    background: #ff6600;
}
複製代碼

loop

less的loop是用when來實現的，下面咱們就寫一個簡單的例子

.fn( @i ) when ( @i < 10 )
{
    width: unit( @i , px );
    .fn(( @i + 1 ));
}
.loopWidth
{
    .fn(1);
}
//編譯
.loopWidth {
  width: 1px;
  width: 2px;
  width: 3px;
  width: 4px;
  width: 5px;
  width: 6px;
  width: 7px;
  width: 8px;
  width: 9px;
}
複製代碼

  經過簡單例子大概就能明白less中的loop了，下面簡單寫一個日常能用到的，好比給list的item添加不一樣的背景圖片

@imgurl: "../img";
.bg-loop(@n,@i:1) when (@i < @n)
{
    .list
    {
        .item-@{i}
        {
            background-image: url("@{imgurl}/icon-@{i}.jpg");
        }
    }
   
    .bg-loop(@n,(@i+1));
}
.bg-loop(4);

//編譯
.list .item-1 {
  background-image: url("../img/icon-1.jpg");
}
.list .item-2 {
  background-image: url("../img/icon-2.jpg");
}
.list .item-3 {
  background-image: url("../img/icon-3.jpg");
}

複製代碼

匹配模式

舉一個寫三角形的列子，less提供@_來匹配共同的一些操做.

.triangle(top,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(right,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
}
.triangle(bottom,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style:  dashed dashed solid dashed;
}
.triangle(left,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid ;
}
.triangle(@_,@width:100px,@color:#333)
{
    height: 0;
    width: 0;
    overflow: hidden;
}
.target
{
    .triangle(top);
}
//css
.target {
  border-width: 100px;
  border-color: #333 transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  height: 0;
  width: 0;
  overflow: hidden;
}


複製代碼

雜項目

arguments

arguments包含了全部參數

.border(@w:1px,@s:solid,@c:#eee)
{
    border:@arguments;
}
.arg{
    .border;
}
//css
.arg {
  border: 1px solid #eee;
}
複製代碼

避免編譯

  有時候一些計算須要到客戶端才進行，好比使用calc，在less轉css中會被提早計算，這時候就須要避免編譯，格式是 ～‘避免編譯的內容’

.inner
{
    width: 100px;
    height: ~'calc(1000/2)';
}
複製代碼

### ！important less裏也能夠用！important，這個不建議用

.box{
    width: 200px;
    height: 200px;
    background: #333;
}

.inner
{
    .box !important;
}
//css
.inner {
  width: 200px !important;
  height: 200px !important;
  background: #333 !important;
}

複製代碼

函數

經常使用的函數

一些經常使用的函數：

lighten 提升亮度 darken 下降亮度

@bgc:#ff6600;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: lighten(@bgc,20%); //亮度提升百分之二十
}
.box-2
{
    width: 100px;
    height: 100px;
    background: darken(@bgc,20%);//亮度減小百分之二十
}
複製代碼

saturate 提升飽和度 desaturate 下降飽和度

@bgc: skyblue;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: saturate(@bgc,100%); //飽和度提升百分之一百
}
.box-2
{
    width: 100px;
    height: 100px;
    background: desaturate(@bgc,100%);//飽和度減小百分之一百
}
複製代碼

percentage 轉換百分比 unit 單位聯合 ceil 向上取整 floor 向下取整 round 四捨五入 abs 絕對值

@h:100px;
.box{
    width: percentage(.1); 
    height: round(4.5);
    padding: ceil(4.1);
    border-width: abs(-100);
    margin: floor(4.9);
    font-size: unit(100,px);
    line-height: unit(@h);
}
//css
.box {
  width: 10%;
  height: 5;
  padding: 5;
  border-width: 100;
  margin: 4;
  font-size: 100px;
  line-height: 100;
}

複製代碼

總結

  less的基本知識都大概介紹了，第一次寫這樣的博文感受有點吃力，感受全程在貼代碼，不奢求有人看了，主要記錄下知識點以便本身回頭查閱，漫漫前端路繼續加油。

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