在Sass中創建變量組

在我正在處理的網站上，我們使用的是基於PHP的系統Scaffold，這是一個類似於Sass的基於PHP的系統。它也可以處理Sass函數\文件。不幸的是，該系統現在正在放棄使用，我們正在尋找完全轉向Sass的方式。儘管我沒有找到一種方法將Sass移植到變量組，但Scaffold有一個很大的特性。在Sass中創建變量組

Scaffold中的變量可以按組分組，並與點分隔標記一起使用。例如，我將它們定義爲：

@variables vargroup1{ 
    variable1: ####; 
    variable2: ####; 
    variable3: ####; 
    variable4: ####; 
}

然後在代碼上使用，例如。

body{ width: vargroup1.variable1; margin: vargroup1.variable2 + 10;}

這有助於發展了很多，因爲你可以從系統組在一起變量和讀取CSS文件，你可以很容易地知道參考什麼。我在Sass文檔中沒有找到類似的東西，任何人都知道它是否可能？或者如果有反正使用Mixins來做到這一點？

謝謝

來源

2012-03-20 Yohan Leafheart

在Sass中沒有等價物。但我可以認爲有兩種解決方法：

1）Sass lists及其相關list functions。

你的代碼可能如下所示：

$variables = 40px 30px 20px 10px; 

body {width: nth($variables, 1); margin: nth($variables, 2) + 10;}

這是不一樣的，因爲列表索引不能是字符串，所以你沒有任何辦法來命名你的變量。

2）定義一個自定義函數。看看功能指令在薩斯部分引用

@function variables($variable_name) { 
    @if ($variable_name == 'variable1') { 
    @return 40px; 
    } @else if ($variable_name == 'variable2') { 
    @return 30px; 
    } 
} 

body {width: variables('variable_1'); margin: variables('variable_2') + 10;}

這種方式是不太直觀和醜陋，但你可以「命名的變量」。

來源

2012-03-21 15:38:39

謝謝你的回答，我非常擔心。 – 2012-03-23 02:36:44

歡迎您。可惜沒有一個確切的等值。 – 2012-03-23 08:46:17

可以使用SASS列出了它在類似的方式相關的功能：

// List order: top, bottom, left, right, width, height, ... 
$Header: 10px,auto,10px,auto,100%,50px; 
$Footer: auto,0px,0px,auto,100%,20px; 

@function getVar($variable,$name:top){ 
    $var_index:1; 
    @if $name==bottom { 
     $var_index:2; 
    } @else if $name==left { 
     $var_index:3; 
    } 
    // Continue de if else for each property you want. 
    return nth($variable,$var_index); 
}

這樣調用是這樣的：

getVar($Header,left)

應該返回左屬性的值了列表Header，但將其更改爲getVar($Footer,top)將返回「頁腳組」（頁腳值列表）的頂部屬性的值。

這對於使用這些值的時間是有效的，但是對於定義，您必須遵循確切的順序並且不能留下任何空值，最接近我發現的空值是#{''}什麼意思是「Empty String with no引號「，一個空值，但被添加到CSS。

來源

2012-03-27 23:45:18 Asfhy

'（）'是Sass中的一個空列表。 – Zenexer 2013-05-17 23:39:06

我使用zip和index碰到this somewhat clunky solution（參見Chris Eppstein的回覆）。顯然，SASS的維護者爲了迴應類似的問題而添加了這些內置函數。

引用他的回答是：

$border-names: a, b, c; 
$border-widths: 1px, 1px, 2px; 
$border-styles: solid, dashed, solid; 
$border-colors: red, green, blue; 
$borders: zip($border-widths, $border-styles, $border-colors); 

@function border-for($name) { 
    @return nth($borders, index($border-names, $name)) 
} 

@each $name in $border-names { 
    .border-#{$name} { 
    border: border-for($name); 
    } 
}

會產生：

.border-a { border: 1px solid red; } 
.border-b { border: 1px dashed green; } 
.border-c { border: 2px solid blue; }

的「命名變量」來自列表「-names」在頂部;然後使用該變量列表中所需變量名的index從另一個變量列表中獲取第n個值。 zip用於將列表分離到一起，以便您可以同時從所有列表中檢索相同的索引。在一個函數中包裝該行爲可以更容易地檢索一個集合。

來源

2012-09-21 03:42:18 drzaus

嗯......多維數組看起來更好 - 參見[SASS @each with multiple variables]（http://stackoverflow.com/questions/6572588/sass-each-with-multiple-variables）和[「更優雅的」解決方案]（http://stackoverflow.com/a/8380156/1037948） – drzaus 2013-02-13 19:20:19

等 - zip正在製作多維數組。沒關係;我會離開上面的鏈接，因爲它仍然有用。 – drzaus 2013-02-13 19:22:25

在Sass中創建變量組

回答

相關問題