Heim Web-Frontend HTML-Tutorial compass模块Utilities_html/css_WEB-ITnose

compass模块Utilities_html/css_WEB-ITnose

Jun 24, 2016 am 11:32 AM

引入Utilities:

@import "compass/utilities";
Nach dem Login kopieren

分别引入:

@import "compass/utilities/color";
Nach dem Login kopieren

Color:颜色相关的工具集合
1、Color Brightness用来计算一个值的亮度

1 @debug brightness(#000);2 @debug brightness(#ccc);3 @debug brightness(#fff);
Nach dem Login kopieren

在命令行会输出颜色的亮度。
2、Color Contrast
contrasted mixin根据我们传入的背景色的色值自动帮我们生成background-color属性,同时在预设的默认深色值和浅色值中选一个跟我们背景色对度大的设为我们的color属性,为的是让文字在当前背景下更好的突现出来

General:通用的一般类的集合(比如:跨浏览器的float,清除浮动等等)

clearfix:清除浮动

Print:打印控制工具的集合
引入打印模块

@import "compass/utilities/print";
Nach dem Login kopieren

我们必须在两个文件中协同使用,print.scss,print.scss也需要引入print模块。在print.scss中调用print-utilities mixin 。
还要在screen.scss中调用print-utilities mixin(调用的时候需要传一个media参数,指定为screen,不传默认为print):

@include print-utilities(screen);
Nach dem Login kopieren

Sprites:精灵图合图相关的工具集合(使用compass的重中之重)

Tables:table样式相关的工具集合
1、Table Borders:用来给table添加border。两个mixin,一个修饰外侧的边框,一个修饰单元格之间的边框
2、Table Scaffolding:table脚手架,进行单元格文本的对齐以及padding的初始化
3、Table Striping:对奇偶行进行不同的颜色修饰,对相隔列进行颜色修饰
alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color, $footer-color)
第一参数:偶数行的颜色
第二个参数:奇数行的颜色
第三个参数:间隔纵列的颜色差值(为了突出相邻两列的差异,相邻的两列,每隔一列我们会在其原来颜色的基础上去减掉一个颜色差值)
第四个参数:header部分的颜色值(指th标签)不设置默认为白色
第五个参数:footer部分的颜色值,不设置默认为白色
例子:

 1 <table class="goods-price" cellspacing="0"> 2     <thead> 3         <tr class="odd"> 4             <th>水果品类</th> 5             <th>橘子</th> 6             <th>苹果</th> 7             <th>鸭梨</th> 8             <th>香蕉</th> 9             <th>打包</th>10         </tr>11     </thead>12     <tbody>13         <tr class="even">14             <th>单价</th>15             <td class="numeric">1</td>16             <td class="numeric">2</td>17             <td class="numeric">3</td>18             <td class="numeric">4</td>19             <td class="numeric">10</td>20         </tr>21         <tr class="odd">22             <th>十个</th>23             <td class="numeric">10</td>24             <td class="numeric">20</td>25             <td class="numeric">30</td>26             <td class="numeric">40</td>27             <td class="numeric">100</td>28         </tr>29     </tbody>30     <tfoot>31         <tr class="even">32             <th>总额</th>33             <td class="numeric">11</td>34             <td class="numeric">22</td>35             <td class="numeric">33</td>36             <td class="numeric">44</td>37             <td class="numeric">110</td>38         </tr> 39     </tfoot>40 </table>
Nach dem Login kopieren

SASS:

1 .goods-price{2  $table-color: #7a98c6;3  @include outer-table-borders();4  @include inner-table-borders(1px, darken($table-color, 40%));5  @include table-scaffolding();6  @include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222222);7 }
Nach dem Login kopieren

 

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Was ist der Zweck des & lt; Meter & gt; Element?

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Was ist der Zweck des & lt; datalist & gt; Element?

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Was ist der Zweck des & lt; Fortschritts & gt; Element?

See all articles