オープンソースドキュメント学的LESSシリーズ2
24749 ワード
1.引用
オープンソース文書学LESSシリーズの第1部を通して、古典的なLESS Mixinsセットprebootを通じて、変数、注釈、混合と混合のパラメータなど、LESSの基礎知識を学びました.詳しくはオープンソース文書学LESSシリーズ1を参照してください.
私たちは第2部を続け、tRRtoolbeltを通過します.lessのコード解読でLESSを学ぶ.
tRRtoolbelt.lessはTrent Oswaldによって開発された日常応用を用いたLESS mixinisとfunctionセット(handy LESS-CSS mixins and functions for common actions)である.
2.コード解読
まずはコメント
次に色の変数について
tRRtoolbelt.lessは関数部分にLESSネーミングスペースを使用し,コードの階層感と可読性を向上させた.
2.1ネーミングスペース
場合によっては、CSSをよりよく組織するために、または単純により良いパッケージのために、いくつかの変数または混合モジュールをパッケージ化し、繰り返し使用することができます.たとえば、
2.2スコープ
LESSの役割ドメインは他のプログラミング言語と非常に似ており、まずローカルから変数やハイブリッドモジュールを検索し、見つからない場合は親役割ドメインを検索し、見つけるまで検索します.
はい、ドキュメントを見てみましょう.
CSS3
PIEは問題を解決する.
2.3多条件判断
2.4型判定関数
LESSでは「is~」の判定関数を用いて条件判定を行うこともでき、LESSでは以下の判定関数が提供される.
iscolor(@colorOrAnything);//1つの値が色であるかどうかを判断するisnumber(@numberOrAnything);//1つの値が数値(単位を含む)であるか否かを判断するisstring(@stringOrAnything);//1つの値が文字列であるか否かを判断する.
iskeyword(@keywordOrAnything);//1つの値がキーワードであるか否かを判断する.
isurl(@urlOrAnything);//1つの値がurl であるか否かを判断する
ispixel(@pixelOrAnything);//1つの値がpx単位の数値であるか否かを判断する.
ispercentage(@percentageOrAnything);//1つの値がパーセンテージであるか否かを判断する.
isem(@emOrAnything);//1つの値がem単位の数値であるか否かを判断する.
isunit(@numberOrAnything, "rem");//* 1つの値が指定単位の値であるか否かを判断する.
2.5文字列補間
変数は,@{varname}のような構造でrubyやphpのように文字列に埋め込むことができる.たとえば
2.6コンパイルの回避
コンパイルしたくない文字列の前に「~」を付けてコンパイルを避けることができます.たとえば
3.総括と展望
このチュートリアルはtRRtoolbeltです.lessはコード解析を行い,主にLESSにおけるネーミング空間,役割ドメイン,多条件判断とタイプ判断関数,文字列補間とコンパイル回避などの知識を説明した.
シリーズチュートリアルはまだ続いていますので、お楽しみに.
---------------------------------------------------------------
フロントエンドはwhqetを開発し、webフロントエンドの開発技術に注目し、ホームページ関連資源を共有する.
---------------------------------------------------------------
オープンソース文書学LESSシリーズの第1部を通して、古典的なLESS Mixinsセットprebootを通じて、変数、注釈、混合と混合のパラメータなど、LESSの基礎知識を学びました.詳しくはオープンソース文書学LESSシリーズ1を参照してください.
私たちは第2部を続け、tRRtoolbeltを通過します.lessのコード解読でLESSを学ぶ.
tRRtoolbelt.lessはTrent Oswaldによって開発された日常応用を用いたLESS mixinisとfunctionセット(handy LESS-CSS mixins and functions for common actions)である.
2.コード解読
まずはコメント
/* ******************************
tRRtoolbelt.less
handy LESS-CSS mixins and functions for common actions
Dependencies:
LESScss
Developed by Trent Oswald <[email protected]>
For available functions, search (<ctrl>+f) for @FUNCTIONS
****************************** */
// Copyright (c) 2013
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
注釈では、このプロジェクトの基本的な状況、簡潔さ、開発者、著作権などを紹介しています.次に色の変数について
/*==================================
= @COLORS =
==================================*/
@black: #000000;
@white: #ffffff;
@gray: #a0a0a0;
@red: #aa0000;
@green: #00aa00;
@blue: #0000aa;
@yellow: #aaaa00;
@cyan: #00aaaa;
@magenta: #aa00aa;
// Social Media gradient colors
@facebook-1: #3066a2;
@facebook-2: #14427e;
@facebook-toolbar:#7A8EB8;
@twitter-1: #1d95c9;
@twitter-2: #0a68ae;
@weibo-1: #254555;
@weibo-2: #0F1D23;
@renren-1: #387BB5;
@renren-2: #31679C;
フォントの変数設定/*==================================
= @FONTS =
==================================*/
/*serif*/
@georgia: Georgia, serif;
@palatino: "Palatino Linotype", "Book Antiqua", Palatino, serif;
@times: "Times New Roman", Times, serif;
/*sans-serif*/
@arial: Arial, Helvetica, sans-serif;
@arialThin: "Arial Black", Gadget, sans-serif;
@impact: Impact, Charcoal, sans-serif;
@lucida: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
@tahoma: Tahoma, Geneva, sans-serif;
@trebuchet: "Trebuchet MS", Helvetica, sans-serif;
@verdana: Verdana, Geneva, sans-serif;
/*monospace*/
@mono1: "Courier New", Courier, monospace;
@mono2: "Lucida Console", Monaco, monospace;
次は関数部分です/*==================================
= @FUNCTIONS =
==================================*/
/**
These functions are utilizing namespacing. They are called as the following:
#tRRt > #reset > .meyer; - for meyer reset css
#tRRt > #rounded > .all(5px) - for a 5px rounded corner
#tRRt > #functions > #ratio outputs a new variable, either @rw or @rh, standing for ratio-calculated-width and ration-calculated-height.
This allows you to use the new value wherever needed.
If you would like additional functions added, feel free to fork and make a pull request on github.
**/
// Basic Functions - completely self-contained functions
@PIElocation: 'PIE.htc';
#tRRt{
#reset {
.meyer () {
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;
vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,
figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,
q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
}
.html5doctor () {
/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,
cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,
ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent}body{line-height:1}article,aside,
details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul
{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,
q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;
background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;
border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;
margin:1em 0;padding:0}input,select{vertical-align:middle}
}
.yui3 () {
/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,
cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}
caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,
q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}
sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;
font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
#yui3-css-stamp.cssreset{display:none}
}
.uniselector () {
/* cssreset.com */
*{margin:0;padding:0;}
}
.normalize () {
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:0.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}
}
.vanilla () {
/** Vanilla CSS 1.0.2 - http://cssreset.com */
body{font:9pt/1.5em sans-serif;}pre,code,tt{font:1em/1.5em 'Andale Mono','Lucida Console',monospace;}h1,
h2,h3,h4,h5,h6,b,strong{font-weight:bold;}em,i,dfn{font-style:italic;}dfn{font-weight:bold;}p,code,pre,
kbd{margin:0 0 1.5em 0;}blockquote{margin:0 1.5em 1.5em 1.5em;}cite{font-style:italic;}li ul,li ol{margin:0 1.5em;}
ul,ol{margin:0 1.5em 1.5em 1.5em;}ul{list-style-type:disc;}ol{list-style-type:decimal;}ol ol{list-style:upper-alpha;}
ol ol ol{list-style:lower-roman;}ol ol ol ol{list-style:lower-alpha;}dl{margin:0 0 1.5em 0;}
dl dt{font-weight:bold;}dd{margin-left:1.5em;}table{margin-bottom:1.4em;width:100%;}th{font-weight:bold;}th,
td,caption{padding:4px 10px 4px 5px;}tfoot{font-style:italic;}sup,sub{line-height:0;}abbr,
acronym{border-bottom:1px dotted;}address{margin:0 0 1.5em;font-style:italic;}del{text-decoration:line-through;}
pre{margin:1.5em 0;white-space:pre;}img.centered,.aligncenter,div.aligncenter{display:block;margin-left:auto;
margin-right:auto;}img.alignright{display:inline;}img.alignleft{display:inline;}.alignright{float:right;
margin-left:10px;}.alignleft{float:left;margin-right:10px;}img { max-width: 100%; }* html .clearfix{height:1%;}
*+html .clearfix{display:inline-block;}.clearfix:after{content:".";display:block;height:0;clear:both;
visibility:hidden;}* html .group{height:1%;}*+html .group{display:inline-block;}.group:after{content:".";
display:block;height:0;clear:both;visibility:hidden;}
}
}
}
tRRtoolbelt.lessは関数部分にLESSネーミングスペースを使用し,コードの階層感と可読性を向上させた.
2.1ネーミングスペース
場合によっては、CSSをよりよく組織するために、または単純により良いパッケージのために、いくつかの変数または混合モジュールをパッケージ化し、繰り返し使用することができます.たとえば、
#tRRt{
#reset {
.meyer () {
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
/* */
}
.html5doctor () {
/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
/* */
}
.yui3 () {
/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
/* */
}
.uniselector () {
/* cssreset.com */
*{margin:0;padding:0;}
}
.normalize () {
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
/* */
}
.vanilla () {
/** Vanilla CSS 1.0.2 - http://cssreset.com */
/* */
}
}
}
は、CSS resetとnormalizeの一般的な方法を含むネーミングスペースを定義します.次に、これらのメソッドを次のように呼び出すことができます..some{
// meyer
#tRRt > #reset > .meyer;
}
2.2スコープ
LESSの役割ドメインは他のプログラミング言語と非常に似ており、まずローカルから変数やハイブリッドモジュールを検索し、見つからない場合は親役割ドメインを検索し、見つけるまで検索します.
はい、ドキュメントを見てみましょう.
#functions {
#ratio {
.width (@h,@ow,@oh){
@rw: @h * (@ow/@oh);
}
.height (@w,@ow,@oh){
@rh: @w * (@oh/@ow);
}
}
}
#position {
.tl (@x:0px,@y:0px,@z:1,@type: absolute){
position:@type;
left:@x;
top:@y;
z-index:@z;
}
.tr (@x:0px,@y:0px,@z:1,@type: absolute){
position:@type;
right:@x;
top:@y;
z-index:@z;
}
.bl (@x:0px,@y:0px,@z:1,@type: absolute){
position:@type;
left:@x;
bottom:@y;
z-index:@z;
}
.br (@x:0px,@y:0px,@z:1,@type: absolute){
position:@type;
right:@x;
bottom:@y;
z-index:@z;
}
}
#bg {
.color (@color,@fade:50){
background-color:fade(@color,@fade);
}
#image {
#stretch{
.all (@file,@pos: center center,@repeat: no-repeat){
background-image:url(@file);
-webkit-background-size:100% 100%;
background-size:100% 100%;
background-position:@pos;
background-repeat:@repeat;
}
.x (@file,@pos: center center,@repeat: no-repeat){
background-image:url(@file);
-webkit-background-size:100%;
background-size:100%;
background-position:@pos;
background-repeat:@repeat;
}
.y (@file,@pos: center center,@repeat: no-repeat){
background-image:url(@file);
-webkit-background-size: auto 100%;
background-size: auto 100%;
background-position:@pos;
background-repeat:@repeat;
}
}
.cover (@file,@pos: center center,@repeat: no-repeat){
background-image:url(@file);
-webkit-background-size:'cover';
background-size:'cover';
background-position:@pos;
background-repeat:@repeat;
}
.contain (@file,@pos: center center,@repeat: no-repeat){
background-image:url(@file);
-webkit-background-size:'contain';
background-size:'contain';
background-position:@pos;
background-repeat:@repeat;
}
}
}
ここでは、いくつかのオブジェクトが定義されています.彼らは依然としてトップオブジェクト#tRRtに属しています.ただし、書くのを簡略化するために、中間部分がリストされています.#gradient{
.h (@startColor: #EEE, @endColor: #FFF){
background-color: @endColor;
background-image: -webkit-gradient(linear, left center, right center, from(@startColor),to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
background-image: linear-gradient(left, @startColor, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='%d', EndColorStr='%d')", @startColor, @endColor));
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
-pie-background: linear-gradient(to right,@startColor, @endColor);
behavior: url(@PIElocation);
}
}
.v (@startColor: #EEE, @endColor: #FFF){
background-color: mix(@startColor, @endColor, 60%);
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(top, @startColor, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @endColor);
background-image: -o-linear-gradient(top, @startColor, @endColor);
background-image: linear-gradient(top, @startColor, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='%d', EndColorStr='%d')", @startColor, @endColor));
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
-pie-background: linear-gradient(to bottom,@startColor, @endColor);
behavior: url(@PIElocation);
}
}
.v3 (@startColor: #00b3ee, @middleColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f){
background-color: mix(@middleColor, @endColor, 80%);
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), color-stop(@colorStop, @middleColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @middleColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @middleColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @middleColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @middleColor @colorStop, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='%d', endColorstr='%d')", @startColor, @endColor));
}
.v4 (@startColor: #B0BAC5, @middleColor1: #9DA7B2, @middleColor2: #919CA8, @endColor: #7E8A98){
background: mix(@middleColor1, @middleColor2, 50%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(50%, @middleColor1), color-stop(51%, @middleColor2), color-stop(100%, @endColor));
background-image: -webkit-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
background-image: -moz-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
background-image: -o-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
background-image: linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
}
.radial (@innerColor: #EEE, @outerColor: #FFF){
background-color: @outerColor;
background-image: -webkit-gradient(radial, 50% 50%, 200, 50% 50%, 20, from(@outerColor), to(@innerColor));
background-image: -webkit-radial-gradient(50% 50%, @innerColor, @outerColor);
background-image: -moz-radial-gradient(50% 50%, @innerColor, @outerColor);
background-image: -o-radial-gradient(50% 50%, @innerColor, @outerColor);
background-image: radial-gradient(50% 50%, @innerColor, @outerColor);
}
.angle (@startColor: #555, @endColor: #333, @degrees: 45){
background: @endColor;
background-image: -webkit-gradient(linear, ~"@{degrees}deg", from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: -moz-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: -o-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: linear-gradient(~"@{degrees}deg", @startColor, @endColor);
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
-pie-background: linear-gradient(~"@{degrees}deg",@startColor, @endColor);
behavior: url(@PIElocation);
}
}
}
#shadow{
.text(){
}
#box{
.in(@x:1px, @y:1px, @spread:2px, @color:#000){
@params: inset @x @y @spread @color;
-webkit-box-shadow: @params;
-moz-box-shadow: @params;
box-shadow: @params;
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
.out(@x:1px, @y:1px, @spread:2px, @color:#000){
@params: @x @y @spread @color;
-webkit-box-shadow: @params;
-moz-box-shadow: @params;
box-shadow: @params;
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
.multi (@values: "1px 1px 2px #000, 0 0 4px #fff, inset 1px 3px 2px #000") { /* for multi values */
-webkit-box-shadow: e(@values);
-moz-box-shadow: e(@values);
box-shadow: e(@values);
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
}
}
#rounded{
.all(@radius: 5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
.tl (@radius: 5px){
-webkit-border-top-left-radius: @radius;
-moz-border-top-left-radius: @radius;
border-top-left-radius: @radius;
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
.tr (@radius: 5px){
-webkit-border-top-right-radius: @radius;
-moz-border-top-right-radius: @radius;
border-top-right-radius: @radius;
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
.bl (@radius: 5px){
-webkit-border-bottom-left-radius: @radius;
-moz-border-bottom-left-radius: @radius;
border-bottom-left-radius: @radius;
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
.br (@radius: 5px){
-webkit-border-bottom-right-radius: @radius;
-moz-border-bottom-right-radius: @radius;
border-bottom-right-radius: @radius;
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
}
}
は、ランプ、シャドウ、およびフィレットをそれぞれ定義します.ここで特に注意しなければならないのは、ieの低バージョンに対して使用されていることです.CSS3
PIEは問題を解決する.
// pie IE
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
-pie-background: linear-gradient(to right,@startColor, @endColor);
behavior: url(@PIElocation);
}
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
behavior: url(@PIElocation);
}
tRRtoolbelt.lessの最後のコード.opacity(@opacity: 0.5) when (isnumber(@opacity)) and not (@opacity < 0) and not (@opacity > 1) {
zoom: 1;
opacity: @opacity;
filter: e(%("alpha(opacity=%d)", @opacity*100));
}
.box(@w:100%, @h:100%, @type:block){
display: @type;
width: @w;
height: @h;
.box-sizing(content-box);
}
.trans(@time:1s,@which:all,@how:ease-in-out){
-webkit-transition: @which @time @how;
-moz-transition: @which @time @how;
-o-transition: @which @time @how;
transition: @which @time @how;
/*Force hardware rendering (smooth the transitions)*/
-moz-transform: translateZ(0px);
-webkit-transform: translateZ(0px);
-o-transform: translateZ(0px);
-ms-transform: translateZ(0px);
transform: translateZ(0px);
}
.cursor(@url,@x:0,@y:0,@IE,@fallback){
.modern & {
cursor: url(@url) @x @y,
@fallback; /* Older browsers */
}
.lt-ie9 & {
cursor: url(@IE),
@fallback; /* In case IE can't load the above. */
}
}
.resize(@direction: both) { /* ( horizontal | vertical | both ) */
resize: @direction;
overflow: auto;
}
.hide-text() {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.prevent-select() {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clearfix() {
*zoom: 1;
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.box-sizing(@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
ここで重点的に注意する.opacityにおける多条件判断2.3多条件判断
.opacity(@opacity: 0.5) when (isnumber(@opacity)) and not (@opacity < 0) and not (@opacity > 1) {
zoom: 1;
opacity: @opacity;
filter: e(%("alpha(opacity=%d)", @opacity*100));
}
以上の条件の論理演算は、「and」、「not」キーワードを用いて、非、非を実現する.2.4型判定関数
LESSでは「is~」の判定関数を用いて条件判定を行うこともでき、LESSでは以下の判定関数が提供される.
iscolor(@colorOrAnything);//1つの値が色であるかどうかを判断するisnumber(@numberOrAnything);//1つの値が数値(単位を含む)であるか否かを判断するisstring(@stringOrAnything);//1つの値が文字列であるか否かを判断する.
iskeyword(@keywordOrAnything);//1つの値がキーワードであるか否かを判断する.
isurl(@urlOrAnything);//1つの値がurl であるか否かを判断する
ispixel(@pixelOrAnything);//1つの値がpx単位の数値であるか否かを判断する.
ispercentage(@percentageOrAnything);//1つの値がパーセンテージであるか否かを判断する.
isem(@emOrAnything);//1つの値がem単位の数値であるか否かを判断する.
isunit(@numberOrAnything, "rem");//* 1つの値が指定単位の値であるか否かを判断する.
2.5文字列補間
変数は,@{varname}のような構造でrubyやphpのように文字列に埋め込むことができる.たとえば
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
2.6コンパイルの回避
コンパイルしたくない文字列の前に「~」を付けてコンパイルを避けることができます.たとえば
#gradient{
.angle (@startColor: #555, @endColor: #333, @degrees: 45){
background: @endColor;
// @degrees , 。
background-image: -webkit-gradient(linear, ~"@{degrees}deg", from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: -moz-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: -o-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: linear-gradient(~"@{degrees}deg", @startColor, @endColor);
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
-pie-background: linear-gradient(~"@{degrees}deg",@startColor, @endColor);
behavior: url(@PIElocation);
}
}
}
は、ieプロパティを書くときにコンパイルを避けるためによく使用されます.3.総括と展望
このチュートリアルはtRRtoolbeltです.lessはコード解析を行い,主にLESSにおけるネーミング空間,役割ドメイン,多条件判断とタイプ判断関数,文字列補間とコンパイル回避などの知識を説明した.
シリーズチュートリアルはまだ続いていますので、お楽しみに.
---------------------------------------------------------------
フロントエンドはwhqetを開発し、webフロントエンドの開発技術に注目し、ホームページ関連資源を共有する.
---------------------------------------------------------------