Sass and Compass Study notes

1, Sass is very sensitive to grammar indentation, with indentation instead of {}, with a newline instead of, Scss is a superset of CSS3, syntax and CSS similar. If you are using Python or ruby, it would be appropriate to choose the whitespace-sensitive intact indent syntax.

2. The variable name starts with $ and can include-and _

3. The mixer is able to effectively avoid repetition in the handwritten style sheet. However, because rules are mixed into other classes
, so it is not possible to completely avoid duplicates in the output style sheet

4. Compass consists of three main parts: a class library of mixers and utilities that can be integrated into the application development environment to open
Systems, and a platform for building frameworks and extensions.

5, Sass can use sub-selector (>), the same layer selector (+, ~)

6, nested attributes, according to-decomposition of the attribute name, followed by the attribute to add:

7, the local file naming time with _, when using @import import, you can omit _ and suffix name (. scss. Sass),

@import can be placed inside CSS rules or outside of CSS rules

8, Silent Comment://does not appear in the CSS code

Standard NOTE:/* * * * will appear in the CSS code, but the comment will not appear when the comment is placed where the CSS is not allowed to appear

9. It is best not to inherit CSS rules using descendant selectors (e.g.. Foo. bar)

10, gzip compression can make the style sheet compressed smaller

11. The best way to optimize front-end performance is to minimize the network replication of resources

12. @extend cannot be used in media queries

13. Custom Function @function

The @function directive is very similar to @mixin, except that @function contains less content, and each @function must return a result, using @return to return

14, configure the path of the picture:

Modify it in config.rb: Http_path = "/", configure it as the path you need,

Then, when called in sass, just type in the name of the image, such as:

Background:image-url ("5.jpg");

Attention:

(1) using the following path, it needs to be used on the server, in CONFIG.RB

Http_path = http://127.0.0.1:8020/test1/

(2) If a relative path is used

Http_path = "/"

Relative_assets =true

15, Picture Wizard (currently only available in PNG format)

@import "Compass/utilities/sprites";

@import "icon/*.png";//img Create a new folder named icon

@include all-icon-sprites;//Export All pictures in Sprite (sprite to add s)

. Add-button {//single picture

@include Icon-sprite (Ic_next); Don't all,sprite don't add s

}

16. Link Access

@import "Compass/typography";

a{

@include link-colors (#333,

$hover: #00f,

$active: #f00,

$visited: #555,

$focus: #f00);

}

17. Add bullets to the list

UL {

@include Pretty-bullets (

' Ic_next.png ',

$line-height:18px,

$padding: 14px);

}

18. Replace the text with the picture

H1 {

Set high is because the background picture can not open height, if the picture is larger, there will be some pictures are cut

The width of the image is the width of the parent element because it is not set.

width:300px;

height:100px;

@includereplace-text (' logo.jpg ');

}

19. Gradient

@includebackground (Linear-gradient (360deg, #ccc, #cdf));

But the code that starts with a long list of URLs, which is an SVG, generates the following code:

Sass and Compass Study notes