網頁制作Webjx文章簡介：CSS預處理器和父選擇器.
Web網站和web app開發對 RTL（right-to-left，從右向左的閱讀順序）是非常頭疼的,因為我們沒有相應的CSS屬性或者是現有的CSS屬性在各個瀏覽器兼容性太差，導致不能夠讓網站和網頁應用正確地展示”RTL”。雖然現有一些屬性比如”text-align:start;”和”-moz-margin-star”都支持”RTL”,但是他們都不能兼容所有的瀏覽器.然而大家都知道多國語言版的網站對于”RTL”的支持也是重要的工作之一。
難道我們最終只能這樣做?給選擇器添加一個支持RTL的樣式,有的時候還需要添加少許偏移.
/* ltr / default */ .some { .thing { > .is { .here { margin-left: 20px; } } } } /* rtl */ html[dir=rtl] { .some { .thing { > .is { .here { margin-right: 20px; margin-left: 0; } } } } }我認為這樣寫生不如死,有下面這些理由:
在Stylus中，我發現了一個很好的解決方案，用一個簡單的mixin一解決這結問題。
/* mixin definition ; sets LTR and RTL within the same style call*/ bidi-style(prop, value, inverse-prop, default-value) { {prop}: value; html[dir=rtl] & { {inverse-prop}: value; {prop}: default-value; } } /* usage */ .some { .thing { > .is { .here { bidi-style(margin-left, 20px, margin-right, 0); /* setting LRT and RTL! */ } } } }上面這個mixin十分簡單,但是讓我為之興奮. 相比于機械地復制和頻繁地重寫內嵌結構,這種混合類能讓我設置”RTL”的屬性和值在代碼中相同的位置,從而避免去創建單獨的”RTL”模塊. 在這個方案中,根據文字方向可以簡單的置換出相關屬性,基本上覆蓋了95%的情景.
我也知道LESS也包含了這種模式,但是我不確定SASS也能這樣做.不錯的是,RTL并不是唯一一個能完美應用這個方案的例子.同時,你也可以用這種方法寫一些基本特征的元素像”Modernizr CSS”的類一樣:
.gradient-background { background-image: linear-gradient(top, #555, #333); .no-cssgradients & { background: url("background.png") } }歐耶! 這個簡單的結構讓寫CSS和組織不同狀態時容易了1百萬倍.在理想的情況下,”start”的屬性和值會被增加,但是在這之前沒有,用這種寫法會讓你的生活更輕松。
補充說明以下部分內容來自于自我整理的。
文中主要介紹了的如何在CSS預處理器語言中使用父選擇器。其實在Sass中，同樣具有這樣的功能，我們來看一個簡單的例子，即將文中Stylus的代碼轉換成Sass的處理方式，具體代碼如下所示：
@mixin bidi-style($prop,$value,$inverse-prop,$default-value){ #{$prop}: $value; html[dir=rtl] & { #{$inverse-prop}: $value; #{$prop}: $default-value; } } .some { .thing { > .is { .here { @include bidi-style(margin-left,20px,margin-right,0); } } } }經過命令編譯出來以后的CSS代碼如下：
>不過在Sass中需要特別注意&的運用，我們來看一個簡單的案例：
.children { .parent & { color:green; } &.parent { color:blue; } & .parent { color: yellow; } }編譯出來的CSS：
我想從上面這個簡單的案例中，在Sass中如何運用&符實現父選擇器嵌套，你已有一個更形象的理解。如果您對這方面還有更好的建議，不仿在下面的評論中與我們分享。
譯者手語：整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！
如需轉載，煩請注明出處：
英文原文：
新聞熱點
疑難解答
