CSS预处理器入门指南：Sass、Compass与Less实战

需积分: 9 198 浏览量更新于2024-07-20 收藏 2.42MB PDF 举报

《初级CSS预处理器：使用SASS、Compass和LESS指南》（Apress, 2015）是一本面向Web开发者的实用教程，它深入浅出地讲解了CSS预处理器在现代前端开发中的重要性。作者Anirudh Prabhu作为专家声音，引导读者理解什么是预处理器，以及它们如何提升CSS的可扩展性和维护性。书中的主要内容包括： 1. **什么是预处理器**：预处理器是扩展CSS语法的功能，它们允许开发者编写更清晰、模块化的代码，通过引入变量、嵌套规则、函数等功能，使得CSS更加灵活和高效。 2. **已知的预处理器框架**： - **SASS (Syntactically Awesome Stylesheets)**：SASS是最早且最受欢迎的CSS预处理器之一，它提供了变量、嵌套规则、混合（mixin）和继承等特性，使代码更具复用性和可读性。 - **Compass**：Compass是基于SASS的一个扩展库，专注于创建CSS3兼容的样式和布局，提供了一系列的工具和框架，如网格系统、图标集等，以简化开发过程。 - **LESS (Leaner StyleSheet)**：LESS是另一个流行的预处理器，它强调简洁，拥有类似SASS的语法，但更注重简洁和易读性。 3. **SASS的特性和用法**：书中详细介绍了如何在SASS中使用变量定义主题色、混合（mixin）实现代码重用、嵌套规则提高组织结构，以及使用@import导入其他SASS文件。 4. **Compass.js和Less.js的应用**：对于前端开发者的实际应用，作者会展示如何在项目中集成Compass.js和Less.js，以及它们如何自动化任务，如图像精灵的生成和代码压缩。 5. **实战和效率提升**：书中通过实例演示，让读者了解如何利用预处理器进行日常开发，如何编写更聪明、更高效的CSS代码，从而提升开发效率。《初级CSS预处理器》这本书是设计师和开发者必备的参考资料，它不仅涵盖了基础知识，还提供了实操技巧，帮助读者掌握CSS预处理器的基本用法，并从中获益于代码管理和项目规模的增长。对于想要进一步提升CSS开发技能和工作效率的读者来说，这是一本不容错过的书籍。

Chapter 1 ■ IntroduCtIon to preproCessors

Let’s consider another example of code repetition. Many times there are blocks of code used at various

locations in your stylesheet, as shown in Listing 1-3.

Listing 1-3. Repeated Code Block

padding-bottom:45px;

text-align:center;

}

footer {

padding-bottom:45px;

text-align:center;

}

With preprocessors, you can put these redundant rules into a mixin, which is defined once and can be

included as needed. This is shown in Listing 1-4.

Listing 1-4. Creating and Using a Reusable Code Block in the Preprocessor

@mixin containerSettings {

padding-bottom: 45px;

text-align:center;

}

p {

@include containerSettings;

}

footer {

@include containerSettings;

}

Listing 1-5. Output of Listing 1-4

p {

padding-bottom: 45px;

text-align: center;

}

footer {

padding-bottom: 45px;

text-align: center;

}

CSS, which is the foundation of all preprocessors, has a steep learning curve when it comes to

understanding how different properties work, understanding cascading, browser support for various

properties, the selectors, the quirks, and so forth. In addition to all the previous points, consider that

maintaining stylesheets in today’s complex interfaces is a big challenge too.

Most of the time, stylesheets are immensely repetitive, with properties or groupings of properties,

etc. The typical CSS file is a linear document. This makes a programmer from an object-oriented domain

go crazy.

As per the DRY principle: Every piece of knowledge must have a single, unambiguous, authoritative

representation in a system.

Chapter 1 ■ IntroduCtIon to preproCessors

The simplest explanation of this is that redundancy in code can result in failure and can create

confusion for developers. CSS does not follow the DRY principle. Most of the times, CSS files will contain

repeated rules, declarations, and values. Developers are constantly writing the same snippets of code

throughout their stylesheets.

CSS lacks features like variables, symbolic constants, conditionals, expressions over variables, and so

on, that are available in all other programming languages.

The CSS preprocessor sits between your preprocessor-friendly file and the compiled CSS files, which

will be served to the browser. CSS preprocessors allow you to write code as per the DRY principle, making it

faster, efficient, and maintainable. The code is then compiled into regular CSS files via the command line or

an application.

Consider the example in Listing 1-6. Modern browsers support RGBA (Red Green Blue Alpha) and

HSLA (Hue Saturation Lightness Alpha) color values. However, you need to provide a fallback for older

browsers. A common practice is to declare a hex value first and then the RGBA or HSLA value.

Listing 1-6. Supporting a New Color Format in All Browsers Using CSS

.container {

background-color: #000;

background-color: rgba(0,0,0, 0.9);

}

With preprocessors, this job can be done easily. If the same task were to be completed using the Sass

precompiler, it would be done as shown in Listing 1-7.

Listing 1-7. Sass Version of Listing 1-6

$black:#000;

.container {

background-color: $black;

background-color: rgba($black, 0.9);

}

The preprocessor does all the calculations related to RGBA values for you.

With arrival of CSS3 support in modern browsers, people are not using images as much and are going

with pure CSS. However, each browser has its own implementation of these features, and therefore these

require vendor prefixes and different syntaxes. You can see a simple example of this in Listing 1-8.

Listing 1-8. Implementation of CSS Features for Different Browsers

.container {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

}

Preprocessors make this job easier by allowing you to declare this code in a reusable component called

a mixin (covered in coming chapters) and then use it directly in your code.

Chapter 1 ■ IntroduCtIon to preproCessors

This example assumes that this reusable mixin is named rounded-corners. The code for this in the Sass

preprocessor would look like Listing 1-9.

Listing 1-9. Implementing the code of Listing 1-8 Using a Sass Preprocessor

.container {

@include rounded-corners(4px);

}

So far you have seen how preprocessors help in coding CSS. Now let’s consider how preprocessors

can help during the post-coding phase. Compressing the CSS reduces its original size, which results in less

loading time. This can be done using online tools or editor addons.

However, the preprocessor can compile to CSS in various ways, one of which is compressed. The

preprocessor can be configured in a way that, whenever a preprocessor file is saved, it is automatically

compiled into CSS and compressed. This makes it production ready.

Misconceptions About CSS Preprocessors

This section discusses some common misconceptions that prevent developers from adopting preprocessors

in their daily workflow.

You Need To Be a Command-Line Expert

Many developers fear the command line. To use preprocessors, you require very little command-line

knowledge. In fact, you need to learn only a single command. Additionally, there are applications that

perform the same task without accessing the command line.

You Need To Change the Way You Write CSS

Developers have a way of writing stylesheets and organizing them. Since the SCSS syntax is the same as CSS,

developers don’t need to change the way they have been writing CSS.

Why Not Write CSS Directly?

The initial reaction of many developers when looking at CSS preprocessors is, “What’s wrong with writing

the CSS directly? We use CSS regularly and can fix all the usual layout issues and develop responsive web

sites that work across all devices.”

Well, preprocessors by themselves cannot produce better CSS. For example, if you lack knowledge as to

how to use CSS, preprocessors won’t be of any use in solving your issues. Preprocessors help you write CSS

in a fast and maintainable manner by adhering to the DRY principle.

剩余152页未读，继续阅读

vanridin

粉丝: 108
资源: 1187

CSS预处理器入门指南：Sass、Compass与Less实战

CSS-Preprocessors

CSS-Preprocessors2

Preprocessors

CSS

css教程，CSS编写

英文css教程：Introduction CSS

css-(1).zip_css_css属性手册 web

CSS 词典（CSS中文手册）

CSS开发样例精通CSS+DIV

css详解

最新资源