compass模块Utilities_html/css_WEB-ITnose
引入Utilities:
@import "compass/utilities";
分别引入:
@import "compass/utilities/color";
Color:颜色相关的工具集合
1、Color Brightness用来计算一个值的亮度
1 @debug brightness(#000);2 @debug brightness(#ccc);3 @debug brightness(#fff);
在命令行会输出颜色的亮度。
2、Color Contrast
contrasted mixin根据我们传入的背景色的色值自动帮我们生成background-color属性,同时在预设的默认深色值和浅色值中选一个跟我们背景色对度大的设为我们的color属性,为的是让文字在当前背景下更好的突现出来
General:通用的一般类的集合(比如:跨浏览器的float,清除浮动等等)
clearfix:清除浮动
Print:打印控制工具的集合
引入打印模块:
@import "compass/utilities/print";
我们必须在两个文件中协同使用,print.scss,print.scss也需要引入print模块。在print.scss中调用print-utilities mixin 。
还要在screen.scss中调用print-utilities mixin(调用的时候需要传一个media参数,指定为screen,不传默认为print):
@include print-utilities(screen);
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>
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 }

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...

Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
