찾다

집 >웹 프론트엔드 >H5 튜토리얼 >ESS와 Sass의 기본 기능 및 차이점

ESS와 Sass의 기본 기능 및 차이점

零下一度
零下一度원래의
2017-05-12 12:03:002739검색

최근 저는 LESS와 관련된 Bootstrap을 접하게 되었습니다. 가장 널리 사용되는 CSS 전처리기는 LESS와 Sass입니다. 그들은 모두 CSS를 개발 언어로 무장시키려고 노력하고 있습니다. make it 간단한 서술형 언어부터 절차적 기능을 갖춘 언어까지 주요 기능은 변수, 믹스인, 중첩, 상속 등입니다. 튜토리얼에서 언급했듯이 CSS 전처리기는 CSS를 디자이너 도구에서 개발자 도구로 변환하는 것입니다. 하지만 읽고 나면 CSS에 대해 철저하게 연구하지 않은 프론트엔드 학생으로서 너무 높이 올라가지 않는 것이 좋겠다고 생각합니다. 게다가 현재 프로젝트에서 CSS를 작성하기 위해 LESS를 사용하는 것은 지나친 것처럼 느껴집니다. 하지만 돌이켜보면 실력의 문제가 아니었습니다. . . bulabulabula~~좋아, 본론으로 들어가자. 나는 매우 좋은 기사를 골라서 당신과 공유했다: LESS와 Sass의 기본 기능과 차이점에 대한 매우 명확한 소개.

LESS와 Sass에는 이보다 훨씬 더 많은 기능이 있는 것으로 나타났습니다. LESS와 Sass에는 다음과 같은 몇 가지 공통 구문이 있습니다.

● Mixins ——클래스 내의 클래스

● 매개변수 혼합 - 함수와 마찬가지로 매개변수를 전달할 수 있는 클래스

● 중첩 규칙 - 클래스 내 중첩 클래스를 사용하여 반복되는 코드를 줄입니다. >

● 연산 - CSS에서 사용되는 수학

● 색상 기능——수정 가능 colors;

● 네임스페이스(namespace)——호출할 수 있는 그룹 스타일; >범위——스타일의 로컬 수정,

● JavaScript 할당——CSS JavaScript 표현식 할당에 사용됩니다.

LESS와 Sass의 주요 차이점은 LESSS가 JavaScript를 기반으로 하므로 클라이언트 측에서 처리된다는 것입니다. 반면 Sass는 Ruby를 기반으로 서버 측에서 처리됩니다. JavaScript 엔진이 코드를 처리하고 수정된 CSS를 브라우저에 출력하는 데 추가 시간이 필요하기 때문에 많은 개발자는 LESS를 선택하지 않습니다. 이를 수행하는 방법에는 여러 가지가 있습니다. 제가 선택한 방법은 개발 단계에서 LESS만 사용하는 것입니다. 개발이 끝나면 LESS 출력을 복사하여 압축기에 붙여 넣은 다음 별도의 CSS 파일에 붙여 LESS 파일을 대체했습니다. 또 다른 옵션은 코알라를 사용하여 LESS 파일을 컴파일하고 압축하는 것입니다. 두 옵션 모두 스타일 출력을 최소화하므로 사용자 브라우저가 JavaScript를 지원하지 않아 발생할 수 있는 문제를 피할 수 있습니다.

LESS is More

소개

LESS를 프로젝트에 도입하는 방법은 간단합니다.

1. less.js;2. style.less와 같은 스타일을 넣을 파일을 만듭니다.

3. HTML의

🎜>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
링크의 rel 속성에 주목하세요. LESS가 작동하려면 속성 값 끝에 /less를 사용해야 합니다. 그런 다음 링크 뒤에 스크립트를 도입하는 것도 필요합니다.

HTML5 구문

을 사용하고 있다면 왜 안 되겠습니까? ——type="text/css" 및 type="text/javascript"를 생략할 수 있습니다.

변수

개발자라면 변수는 가장 친한 친구가 되어야 합니다. 정보(이 경우 색상)를 재사용하려면 해당 정보를 변수로 설정하면 됩니다. 이렇게 하면 일관성을 보장하고 코드를 스크롤하여 색상 값을 찾고, 복사하고, 붙여넣는 등의 지루한 작업을 잠재적으로 줄일 수 있습니다. 이러한 색상으로 렌더링하는 데 필요한 일부 HEX 값을 더하거나 뺄 수도 있습니다. 예를 살펴보세요. 

 @blue: #00c;
 @light_blue: @blue + #333;
 @dark_blue: @blue - #333;

LESS와 Sass 변수의 유일한 차이점은 LESS가 @를 사용하고 Sass가 $를 사용한다는 것입니다. 범위에도 약간의 차이가 있는데, 이에 대해서는 나중에 언급하겠습니다.

Mixin

때때로 우리는 스타일 시트에서 재사용되는 스타일 규칙을 만듭니다. HTML 요소에서 여러 클래스를 사용하는 것을 막을 수 있는 사람은 없지만 LESS를 사용하여 스타일 시트에서 이를 수행할 수 있습니다. 이를 설명하기 위해 다음과 같은 간단한 예를 작성했습니다. 

.border {
    border-top: 1px dotted #333;
}
article.post {
    background: #eee;
    .border;
}
ul.menu {
    background: #ccc;
    .border;
}

Sass에서는 스타일 규칙 앞에 @mixin 선언을 추가하여 중첩 규칙임을 지정합니다. 그런 다음 @

include를 통해 호출하세요. 

@mixin border {
 border-top: 1px dotted #333;
}
article.post {
 background: #eee;
 @include border;
}
ul.menu {
 background: #ccc;
 @include border;
}

매개변수 mixin

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

 在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：

.menu {
    border: 1px solid #ddd;
}
.footer {
    @extend .menu;
} 

/* 上面的写法规则和下面的效果是一样的： */
.menu, .footer {
    border: 1px solid #ddd;
}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。对于前面提到的例子，你可以这样写：

#site-body { …
    .post { …
        .post-header { …
            h2 { … }
            a { …
                &:visited { … }
                &:hover { … }
            }
        }
    }
}

上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。

运算

这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。

Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

/* Sass */
2in + 3cm + 2pc = 3.514in
/* LESS */
2in + 3cm + 2pc = Error

Color函数

在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。

@blue: #369;

.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue,10%)), color-stop(100%, @blue)); /*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。

嗯，最终的效果的确很赞：

ESS와 Sass의 기본 기능 및 차이점

很赞的渐变的、基于变量的”Submit”按钮

还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。

条件语句与控制

这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 、 = 和 == 等操作符。

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}
/* Sample Sass "for" loop */

@for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
}

 名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

#defaults {
    .nav_list () {
        list-style: none;
        margin: 0; padding: 0;
    }
    .button () { … }
    .quote () { … }
}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

   nav ul {
    #defaults > .nav_list;
      }

作用域

作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

@color: #00c; /* 蓝色 */
#header {
    @color: #c00; /* red */
    border: 1px solid @color; /* 红色边框 */
}
#footer {
    border: 1px solid @color; /* 蓝色边框 */
}

因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。

注释

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

@base_url : 'www.qianduan.net';

background-image: url("@{base_url}/images/background.png");

转义(Escaping)

可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。

.class {
    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";

}
/*实际上将会输出下面的代码: */
.class {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

}

 JavaScript 赋值

  这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

@string: `&#39;howdy&#39;.toUpperCase()`; /* @string 变成 &#39;HOWDY&#39; */
/* 你也可以使用前面提到的插值： */
@string: &#39;howdy&#39;;
@var: ~`&#39;@{string}&#39;.topUpperCase()`; /* 变为 &#39;HOWDY&#39; */
/* 获取文档的信息 */
@height = `document.body.clientHeight`;

 输出格式

  然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。

结束语

   这两个方法有很多共同点。对写代码的设计师来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。如果你是koala或HTML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

위 내용은 ESS와 Sass의 기본 기능 및 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：IOS 페이지 테두리가 표시되지 않으면 어떻게 해야 합니까? 테두리 이미지 예제 튜토리얼다음 기사：IOS 페이지 테두리가 표시되지 않으면 어떻게 해야 합니까? 테두리 이미지 예제 튜토리얼

관련 기사

더보기