国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

less預處理語言的運用之-變量拼接那點事

這篇具有很好參考價值的文章主要介紹了less預處理語言的運用之-變量拼接那點事。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

less語法的技巧總結,很基礎,熟練掌握后能提高我們在大型項目中的開發(fā)效率

@a:0.5;
@showdaw-px:100;
@mkcolor1:#6ec5ff;
@num:1;
.outer{
  //拼接的字符串在變量后面,需要在冒號后面加~
  @width:~"@{showdaw-px}px";
  //拼接的字符串在冒號后面,使用的時候是@@var
  @bgColor:"mkcolor@{num}";
  //乘法運算先定義好運算接口的變量,再引用
  @alpha:@a * 100;
  opacity: @a;
  filter: alpha(opacity=@alpha);
  height: 300px;
  background: @@bgColor;
  width: @width;
}

less預處理語言的運用之-變量拼接那點事,css,less,前端,css

//無參數(shù),省略括號,編譯的時候會顯示這個類
// .pub{
//   width: 100px;
//   height: 100px;
//   background: green;
// }

//有參數(shù),是函數(shù),不會編譯這個函數(shù)
.pub(@bg:green){
  width: 100px;
  height: 100px;
  background: @bg;
}
.outer{
  .pub(red);
  // .pub;
  // background: red;
}
//@arguments 所有參數(shù)
.transition(@property:all,@duration,@timing:linear,@delay:0s){
    transition: @arguments;
}


.sum(@n,@m){
  @result:@n + @m;
}

.box{
  .sum(10,20);
  width:unit(@result,px);
  /* unit是less提供的方法,
    unit([value],'px)是給value值設置單位,
    但是如果之前有單位,此處會把原來的單位去掉
  */
}

less預處理語言的運用之-變量拼接那點事,css,less,前端,css

/* 繼承
   less中的繼承不是copy代碼,
   而是讓繼承與被繼承公用一套css代碼
*/
.pub2{
  width: 100px;height: 100px;
  background-color: red;
}

/* .div:extend(.pub2){
  background-color: green;
} */
.div{
  &:extend(.pub2);
  background-color: green;
}



.com{
  padding: 10px;
  margin: 10px;
}
/* 繼承多個樣式類 */
.box2{
  &:extend(.pub2,.com);

}

.box3{
  .mark{
    width: 100px;
    height: 100px;
  }
  .inner{
    // &:extend(.mark);  //這樣不能繼承.mark
    &:extend(.box3 .mark);
    background:red;
  }
}

less預處理語言的運用之-變量拼接那點事,css,less,前端,css

遞歸

.columns(@i) when(@i <= 4){
  // width: unit(@i,'px');
  .box@{i}{
    width: unit(@i*10,px);
    margin-bottom: unit(@i*2,px);
    background:red;
    &:hover{
      background: green;
    }
  }
  .columns(@i+1)
}

.columns(1);

less預處理語言的運用之-變量拼接那點事,css,less,前端,css

less連接符與import

@import (reference) './test.less';
//只導入這個css文件,不編譯里面的css內容
.box{
  .mark{

  }
  &.pp{
    background-color: red;
    height: 100px;
  }
  & > .mm{
    background: green;
  }
  .box222{
    .bgColor;
  }
}

less預處理語言的運用之-變量拼接那點事,css,less,前端,css

關注我的個人公眾號,獲取更多前后端開發(fā)經(jīng)驗知識
less預處理語言的運用之-變量拼接那點事,css,less,前端,css文章來源地址http://www.zghlxwxcb.cn/news/detail-565960.html

到了這里,關于less預處理語言的運用之-變量拼接那點事的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉載,請注明出處: 如若內容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • 探索CSS預處理器:Sass、Less與Stylus

    探索CSS預處理器:Sass、Less與Stylus

    ?? 前端開發(fā)工程師、技術日更博主、已過CET6 ?? 阿珊和她的貓_ CSDN 博客專家、23年度博客之星前端領域TOP1 ?? 牛客 高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》 ?? 藍橋云課 簽約作者、上架課程《Vue.js 和 Egg.js 開發(fā)企業(yè)級健康管理項目》、《帶你

    2024年03月11日
    瀏覽(49)
  • 在vite+vue3項目中配置使用css預處理器(less/sass)以及路徑別名

    在vite+vue3項目中配置使用css預處理器(less/sass)以及路徑別名

    vite已經(jīng)將這些預處理器的loader內置了,我們不用再像在webpack項目中那樣,需要下載和配置一堆相關的loader,我們只需要下載less,sass依賴,就能直接在項目中使用啦 使用npm或者yarn來安裝以下依賴: Less預處理器: npm install -D less Sass預處理器: npm install -D sass 如圖,下載之后

    2024年02月11日
    瀏覽(42)
  • 【C語言】程序環(huán)境和預處理|預處理詳解|定義宏(下)

    【C語言】程序環(huán)境和預處理|預處理詳解|定義宏(下)

    主頁:114514的代碼大冒 qq:2188956112(歡迎小伙伴呀hi?(。???。)??) Gitee:莊嘉豪 (zhuang-jiahaoxxx) - Gitee.com 文章目錄 目錄 文章目錄 前言 2.5帶副作用的宏參數(shù) 2.6宏和函數(shù)的對比 3#undef ?編輯 4 命令行定義 5 條件編譯 6 文件包含 總結 咱們書接上回 2.5帶副作用的宏參數(shù) 先來

    2024年01月17日
    瀏覽(33)
  • C語言——程序環(huán)境和預處理(再也不用擔心會忘記預處理的知識)

    C語言——程序環(huán)境和預處理(再也不用擔心會忘記預處理的知識)

    先簡單了解一下程序環(huán)境,然后詳細總結翻譯環(huán)境里的編譯和鏈接,然后在總結編譯預處理。 在 ANSI C 的任何一種實現(xiàn)中,存在兩個不同的環(huán)境 翻譯環(huán)境:這個環(huán)境中源代碼被轉換為可執(zhí)行的機器指令。 執(zhí)行環(huán)境:執(zhí)行二進制代碼。 計算機如何執(zhí)行二進制指令? 我們寫的C語

    2024年02月09日
    瀏覽(36)
  • 【C語言】預處理

    【C語言】預處理

    在ANSI C的任何一種實現(xiàn)中,存在兩個不同的環(huán)境。 第1種是翻譯環(huán)境,在這個環(huán)境中源代碼被轉換為可執(zhí)行的機器指令。 第2種是執(zhí)行環(huán)境,它用于實際執(zhí)行代碼。 1.翻譯環(huán)境 組成一個程序的每個源文件通過編譯過程分別轉換成目標代碼 每個目標文件由鏈接器(linker)捆綁在

    2024年02月17日
    瀏覽(28)
  • C語言【預處理器】

    1、一些關于預處理的知識 ?C代碼中,一般帶 # 的都是預處理指令,包括 宏替換、文件包含、條件編譯 等。 ?為兼容一些老編譯器, # 前后一般不寫空格 ?預處理指令后面不加分號。 2、宏定義 3、文件包含 ?自定義頭文件,用\\\" \\\" 。 引號里填相對路徑或絕對路徑?;诋?/p>

    2024年02月05日
    瀏覽(22)
  • C語言:預處理詳解

    C語言:預處理詳解

    創(chuàng)作不易,來個三連唄! C語?設置了?些預定義符號, 可以直接使? ,預定義符號也是在預處理期間處理的。 __FILE__ //進?編譯的源?件 __LINE__ //?件當前的?號 __DATE__ //?件被編譯的?期 __TIME__ //?件被編譯的時間 __STDC__ //如果編譯器遵循ANSI C,其值為1,否則未定義

    2024年01月19日
    瀏覽(38)
  • 詳解C語言—預處理

    詳解C語言—預處理

    目錄 一、預處理 1、預定義符號介紹 2、預處理指令 #define #define 定義標識符:? #define 定義宏: #define 替換規(guī)則 3、預處理操作符# 4、預處理操作符## 5、帶副作用的宏參數(shù) 6、宏和函數(shù)對比 二、命名約定 三、預處理指令 #undef 四、命令行定義 五、條件編譯? 1、單分支#if:

    2024年02月08日
    瀏覽(28)
  • C語言預處理詳解

    C語言預處理詳解

    上一篇博客中我們講了C語言的編譯與鏈接,在編譯過程中有三個小階段:預處理、編譯、匯編。 本篇博客將詳細講述預處理部分的有關知識點 。 在C語言中,C語言本身設置了?些預定義符號,可以直接使? ,預定義符號的處理也是在預處理期間進行的。 在這里介紹幾個常

    2024年04月15日
    瀏覽(39)
  • 【C語言】預處理詳解

    【C語言】預處理詳解

    ???????? 本文目錄 1 預定義符號 2 #define 2.1 #define 定義標識符 2.2 #define 定義宏 2.3 #define 替換規(guī)則 2.4 #和## 2.5 帶副作用的宏參數(shù) 2.6 宏和函數(shù)對比 2.7 命名約定 3 #undef 4 命令行定義 5 條件編譯 6 文件包含 6.1 頭文件被包含的方式 6.2 嵌套文件包含 這些預定義符號都是語言內置

    2024年02月14日
    瀏覽(36)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包