php7 css样式表加载不来,优化CSS样式表与RECESS

有时候，这真的令人失望的看到一个真正伟大的工具，如何能不来出风头，由于缺乏知名度和良好的推广。 特定的工具，我说的是课间休息 ，一个CSS少编译器开发人员在Twitter上构建的。 在2013年年初推出，它是一年中最容易被忽视的工具之一。

什么是课间休息？

课间休息是建立在减，可极大地用于优化你的CSS代码的开源工具。 它有一些是Web开发人员一直渴望的最强大的功能。 Twitter的称之为“CSS腹地”，但我更愿意把它看作是一个“CSS编译器”。 在本教程中，我将展示如何开始使用课间休息，并探讨它的一些最好的功能。

课间休息的建立是为了检查CSS规则的质量。 它有助于保持CSS代码清洁，无差错和管理。 它也可以直接集成到您的项目，以便编译样式表时有任何改变。

让我们使用它上手。

入门RECESS

您需要运行课间休息的第一件事是Node.js的 去nodejs.org /下载/并选择您的操作系统的最佳安装程序。 按照说明(如果需要)。 一旦Node.js的安装在您的系统上，你可以交叉使用下面的命令来检查。

1

2

node [press enter]

1+1 [press enter]

If you see the correct result in the third line (obviously, it should be 2) then Nodejs is up and running! Woooo… ;) Press ctrl+c twice to exit the node environment.

Now we have to install the RECESS package from the Nodejs repository. Enter the following line at the command prompt.

1

npm install recess -g

You will see a scene similar to one in the The Matrix movie, and finally RECESS will be installed. Bravo! Let’s cross check RECESS installation too.

Just type recess at the command prompt and press enter . You will see a help guide showing various options that can be used along with the recess command.

Writing your first RECESS Command

Let’s begin by analyzing some of our previously created CSS files. I have created a new workspace for RECESS: C drive > Recess_demos folder , and then copied a CSS file from my previous project.

Navigate to the workspace in the command prompt and type

1

recess [filename] [press enter]

In my case, it was recess customstyle.css . As shown in the screenshot below, it tells me there are five failures in my CSS file, followed by the reasons for the failure.

This way you can always see the warnings inside your stylesheet whiling designing any project.

Compiling CSS file

When you compile a CSS file using RECESS, it autocorrects using Strict Property Rules and then logs the corrected styles.

For example, let’s create a simple CSS file named demostyle_1.css , with the following rules inside it:

1

2

3

4

5

6

.jumbotron{

margin-top:40px;

background:url("../images/featured.jpg")bottomcenterno-repeat;

background-size: cover;

color:#FFFFFF;

}

Now type the following inside the command prompt.

1

recess demostyle_1.css --compile

It autocorrects and gives the following output.

1

2

3

4

5

6

.jumbotron {

margin-top:40px;

color:#FFFFFF;

background:url("../images/featured.jpg")bottomcenterno-repeat;

background-size: cover;

}

Now, if you’re thinking how to forcefully log the output inside a new file instead of the command prompt, then write the command as follows.

1

recess [path to old file] --compile > [path to new file]

In my case the command was: recess demostyle_1.css --compile > demostyle_1_compiled.css . This created a new file named demostyle_1_compiled.css with the corrected rules inside the same folder.

Let’s try with few more CSS rules:

Input:

1

2

3

4

5

6

7

.avatar img{

-ms-box-shadow:inset01px5pxrgba(0,0,0,0.2);

-webkit-box-shadow:inset01px5pxrgba(0,0,0,0.2);

-moz-box-shadow:inset01px5pxrgba(0,0,0,0.2);

box-shadow:inset01px5pxrgba(0,0,0,0.2);

-o-box-shadow:inset01px5pxrgba(0,0,0,0.2);

}

Output:

1

2

3

4

5

6

7

.avatar img {

-webkit-box-shadow:inset01px5pxrgba(0,0,0,0.2);

-moz-box-shadow:inset01px5pxrgba(0,0,0,0.2);

-ms-box-shadow:inset01px5pxrgba(0,0,0,0.2);

-o-box-shadow:inset01px5pxrgba(0,0,0,0.2);

box-shadow:inset01px5pxrgba(0,0,0,0.2);

}

Isn’t it awesome?

Compiling LESS file

RECESS has not restricted itself to CSS files only. You can also compile LESS files on the go.

Let’s create a dummy .less file with the following content in it.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@base:#f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {

-webkit-box-shadow: @style @c;

-moz-box-shadow:    @style @c;

box-shadow:         @style @c;

}

.box-shadow(@style, @alpha:50%) when (isnumber(@alpha)) {

.box-shadow(@style, rgba(0,0,0, @alpha));

}

.box {

color: saturate(@base,5%);

border-color: lighten(@base,30%);

div { .box-shadow(005px,30%) }

}

Compiling LESS files in RECESS is similar to compiling them in a LESS compiler. Just type

1

recess [path to less file] --compile

In my case, it turned out to be recess dummy_less.less --compile .

Output:

1

2

3

4

5

6

7

8

9

10

.box {

color:#fe33ac;

border-color:#fdcdea;

}

.box div {

-webkit-box-shadow:005pxrgba(0,0,0,0.3);

-moz-box-shadow:005pxrgba(0,0,0,0.3);

box-shadow:005pxrgba(0,0,0,0.3);

}

Rules of RECESS

There are many rules which RECESS follows while compiling the CSS or LESS files. These rules are by default turned on and can be suppressed individually.

noIDs

Usage: recess filename.css --noIDs true .

This will now show a warning “IDs should not be styled”. You can set it to false when you want to ignore this rule

noJSPrefix

Usage: recess filename.css --noJSPrefix true .

Setting it to true will generate a warning whenever you try to style .js-* classes.

noOverqualifying

Usage: recess filename.css --noOverqualifying true

Ignores div#foo.bar type of styling.

noUnderscores

Usage: recess filename.css --noUnderscores true

Warns when you use underscores in the class names

noUniversalSelectors

Usage: recess filename.css --noUniversalSelectors true

Warns when you try to style using universal selector *

zeroUnits

Usage: recess filename.css --zeroUnits true

Warns when you provide units to the zero property values.

strictPropertyOrder

Usage: recess filename.css --strictPropertyOrder true

Checks strict property rules as specified here .

Compress or Minifying CSS or LESS files

RECESS can even help you compress or minify large stylesheets within seconds. This is one of the handy feature that comes with this tool. Use the following command to do it:

1

recess filename.css --compress

Conclusion

Clean and simple code is extremely important in every project these days. Any tool that helps us achieve this should be welcomed and explored. I hope you will try RECESS in your next project, as I did. Hopefully, you enjoyed understanding this great tool and let’s hope we get to see more updates in this tool in near future.

Let me know your suggestions on this topic by commenting below. You can also make a suggestion if you find a better tool than this one: we’ll be happy to explore that too.

If you want learn more about Node.js you can do so by reading Jump Start Node.js , a Learnable book by Don Nguyen . You can also take the Launch into LESS course to speed up your CSS development using LESS.