Less學習筆記6:運算
運算
Less中的運算
任何數字,顏色或者變數都可以參與運算,運算應該被包裹在括號中
例如:+ - * /
例如:
新建一個變數
@test_01:300px;
在HTML 中,
<div class="box_01"></div>
.box_01{
width:@test_01;
}
此時這個div的寬度就為:300px;
這個時候使用運算,使這個div的寬度為320px
即:
.box_01{
width:@test_01 + 20;
}
這裡的 增加的數值沒有強制性的要求去增加單位。
此時這裡完全按照四則運算規則
顏色也可以進行運算
例如:
.box_01{
width:@test_01 + 20;
color:#ccc - 10;
}
這個時候,編譯出來的CSS樣式中的顏色就為:
.box_01{
width:320px;
color:#c2c2c2;
}
注意:在工作或做專案中,顏色的運算一般不常用,用哪個顏色直接寫某個顏色就好了
相關推薦
Less學習筆記6:運算
運算 Less中的運算 任何數字,顏色或者變數都可以參與運算,運算應該被包裹在括號中 例如:+ - * / 例如: 新建一個變數 @test_01:300px; 在HTML 中, <div class="box_01"></div> .box
視覺化學習筆記6:Less is More
圖表垃圾 在設計視覺化圖表時,你需要刪掉資料中的所有無關內容。Edward Tufte 將所有的無關內容稱為圖表垃圾。 例如,下面這個圖表展示的是宇宙飛船火箭助推器的 O 形環損壞。在挑戰者號爆炸之後的調查中就出現了這張圖。當時的調查確
ESP8266學習筆記6:ESP8266規範wifi連接操作
.text n) 梳理 pri his tail 周期性 官方 esp 一、前言 我整理了從2015年至今關於ESP8266的學習筆記,梳理出來了開發環境、基礎功能、進階學習三大部分。方便自己和他人。可點此查看,歡迎交流。 之前在筆記4《ES
hibernate框架學習筆記6:事務
isolation -c blog 重復 .config rollback pre ont .com MySQL的事務、JDBC事務操作: 詳細見這篇文章:比較詳細 http://www.cnblogs.com/xuyiqing/p/8430214.html 如何在hi
struts2框架學習筆記6:攔截器
筆記 頁面 actions err tor 框架 map 異常 protect 攔截器是Struts2實現功能的核心部分 攔截器的創建: 第一種: package interceptor; import com.opensymphony.xwork2.ActionI
Python學習筆記6:分支迴圈
if : 語句1 語句2 ······ else: 語句1 語句2 ······ for var in series: 語句1 語句2 ········
Less學習筆記9:避免編譯
避免編譯 有時候需要輸出一些不正確的CSS愈發或者使用一些LESS不認識的專有語法。 要在輸出這樣的值,我們可以在字串前加上一個~ 例如:width:~'calc(100%-35)' 有這樣一個樣式: //避免編譯 .test_03{ widt
Less學習筆記8:@arguments 變數
@arguments 變數 [email protected]包含了所以傳遞進來的引數 如果不想單獨處理每一個引數的話就可以像這樣寫: 這之前的寫法: .border_arg(@w:30px,@c:red,@xx:solid){ bord
Less學習筆記7:巢狀規則
巢狀規則 現有一個列表如下: <ul class="list"> <li> <a href="#">這裡是一個進行測試的文字</a>
Less學習筆記5:匹配模式
匹配模式:類似於JS中的if語句,但不完全是,滿足一定條件後才能匹配 比如:用CSS去畫一個三角 <div class='triangle'></div> .triangle{ width: 0; &
Less學習筆記4:樣式混合
混合 對於同一個頁面元素: <div class='box'></div> 在Less檔案中設定box的寬度: @test_width:300px; .box{ width:@test_width; } 此時若還要給div這個元素加一個bor
Less學習筆記3:變數
Less變數 1.定義變數 @變數名:變數值; 注意:一定要以@開頭,不要忘記末尾的分號(;) 例如: @test_width:300px; 2.變數的使用 <div class="box"></div> @test_width:300px;
微控制器入門學習筆記6:新唐微控制器N76E003
學習新唐微控制器是從2018年3月開始的,之前一點也不懂這一塊微控制器,之後脈絡變的越來越清晰。 由於N76E003檔次太低,新塘科技官方的管腳配置,晶片選型……都沒有這一塊晶片,資料唯獨只有:晶片的資料手冊,官方配套的例程,還有部分論壇裡的資料。 我先來簡單的介紹這一塊晶片: 這塊晶片淘寶最低價:0.
ESP8266學習筆記6:ESP8266規範wifi連線操作
一、前言 我整理了從2015年至今關於ESP8266的學習筆記,梳理出來了開發環境、基礎功能、進階學習三大部分,方便自己和他人。可點此檢視,歡迎交流。 之前在筆記4《ESP8266的SmartConfig》http://blog.csdn.net/iotisan/artic
Less學習筆記2:Less中的註釋
Less中的註釋 可是使用css中的註釋:/**/ 也可以使用 // 註釋 (// 編譯的時候會自動過濾掉) 兩者的區別: /**/ 中的註釋在編譯的是會被編譯出來的,會在編譯生成的CSS中會出現 // 是不會被編譯的,編譯時自動過濾,在編譯生成的C
機器學習筆記(6):多類邏輯迴歸-使用gluon
from mxnet import gluon from mxnet import ndarray as nd import matplotlib.pyplot as plt import mxnet as mx from mxnet import autograd def transf
Linux學習筆記6:linux C/C++開發環境搭建指南
Ubuntu中沒用自帶C/C++開發環境,需要使用者自己配置。在UBUNTU中文論壇中的一些帖子集合。 一、安裝基本開發環境 本人想學習一下Linux下的C,C++程式開發,這幾天一直在研究Linux下的C語言編譯環境的建立,因為新裝好的Ubuntu裡面缺少函式庫檔案
OpenGL學習筆記6:高階紋理知識
矩形紋理 紋理目標為GL_TEXTURE_RECTANGLE。 首選,矩形紋理不能進行Mip貼圖; 然後,矩形紋理不是標準化的(實際上是對畫素定址) 最後,紋理座標不能重複,並且不支援紋理壓縮 載入矩形紋理 bool LoadTGATextu
Android學習筆記6:使用Intent1
《第一行程式碼——Android》郭霖著 Intent介紹 Intent是Android程式中各元件之間進行互動的一種重要方式,它不僅可以指明當前元件想要執行的動作,還可以在不同元件之間傳遞資料。Intent一般可被用於啟動活動、啟動服務、以及傳送廣播等場景。
python爬蟲學習筆記6:正則表示式及re庫
正則表示式 語法 常用操作符 re庫 import re re庫的主要功能函式 re.search() re.search(pattern,string,f