css 前處理器選擇
Working on web sites and web apps that require RTL support is hard because ensuring correct display in RTL is made more difficult by the fact that we either don't have the CSS properties and values to do so or that the existing support isn't widely used enough yet. We have values like start for text-align and we have properties like -moz-margin-start, but they aren't supported everywhere despite knowing that RTL is an important aspect of global sites.
在需要RTL支援的網站和Web應用程式上工作非常困難，因爲要確保RTL中的正確顯示更加困難，因爲我們要麼沒有CSS屬性和值，要麼現有支援不廣泛夠用了。 我們具有諸如start值以進行text-align ，並且具有諸如-moz-margin-start類的屬性，但是儘管知道RTL是全球站點的重要方面，但並非所有地方都支援它們。
So what do we ultimately have to do? Repeat selectors with a new RTL value and sometimes even an offset:
那麼，我們最終必須做什麼？ 用新的RTL值(有時甚至是偏移量)重複選擇器：
/* ltr / default */
.some {
.thing {
> .is {
.here {
margin-left: 20px;
}
}
}
}
/* rtl */
html[dir=rtl] {
.some {
.thing {
> .is {
.here {
margin-right: 20px;
margin-left: 0;
}
}
}
}
}
I consider this a nightmare for a few reasons:
我認爲這是一場噩夢，原因如下：
- If you have to change the default nested CSS structure, you must remember to do so for the separate RTL block as well 如果必須更改預設的巢狀CSS結構，則必須記住也要對單獨的RTL塊進行更改
- If you have to offset the original rule, you're required to remember to offset the original and then set the new rule 如果必須抵消原始規則，則需要記住抵消原始規則，然後設定新規則
In tinkering with Stylus, I've found an excellent solution for curing all of these problems with a simple mixin:
通過修整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! */
}
}
}
}
The mixin above is a simple but sends me into a state of euphoria. Instead of having to copy and maintain the nested structure, this mixin allows me to set the property values for LTR and RTL in the same place in code, avoiding the need to create separate RTL blocks. And this scenario, of simply swapping out properties depending on direction, covers 95% of direction scenarios.
上面的mixin很簡單，但是讓我進入欣快的狀態。 無需複製和維護巢狀結構，此mixin允許我在程式碼的同一位置設定LTR和RTL的屬性值，而無需建立單獨的RTL塊。 這種根據方向簡單交換屬性的方案覆蓋了95％的方案。
I know that LESS also accommodates for this pattern but I'm not sure if SASS does as well. What's also nice is that RTL isn't the only scenario where this is useful; you could also use this for feature-based stuff like Modernizr CSS classes:
我知道LESS也適用於這種模式，但是我不確定SASS是否也適用。 還不錯的是，RTL並不是唯一有用的場景。 您還可以將其用於基於功能的東西，例如Modernizr CSS類：
.gradient-background {
background-image: linear-gradient(top, #555, #333);
.no-cssgradients & {
background: url("background.png")
}
}
Brilliant! This simple structure makes coding CSS and organizing different states a million times easier. In an ideal world, the "start" properties and values would be in place but until then, use this type of strategy to make your life easier!
輝煌！ 這種簡單的結構使CSS編碼和組織不同狀態的工作變得容易了上百萬倍。 在理想的世界中，「開始」屬性和值將存在，但在此之前，請使用這種策略使您的生活更輕鬆！
css 前處理器選擇