Sass에서 PostCSS로
- 高洛峰원래의
- 2017-02-13 14:38:001386검색
첫 번째 단계는 내 Sass 사용 체크리스트를 나열하는 것입니다. 나는 postCSS를 사용하고 있으며 새로운 기능이 대체되었는지 확인합니다. 이 프로젝트에서 사용하고 있는 기능은 다음과 같습니다.
부분 가져오기 )- 변수
- 중첩
- mixins )
- 확장
- 자리 표시자 클래스
- 색상 기능(어둡게 및 RGB 색상 기능)
- 압축(압축)
- 준비새 구문으로 전환한 후 몇 가지 준비가 필요합니다. 현재 프로젝트의 디렉터리 구조는 Sass의 일반적인 사용법입니다. 파일 이름은 밑줄(_)을 사용합니다. , 파일 확장자는 scss입니다. moudules 폴더는 CSS를 컴파일하는 Sass 파일을 저장하는 변수, 자리 표시자 클래스 및 부분 파일을 저장하기가 쉽지 않습니다.
css/
scss/
modules/
_module.scss
...
partials/
_partial.scss
...
tylergaw.scss
각 Sass 구성 요소를 tylergaw.scss로 가져옵니다.
@import "modules/setup"; @import "modules/reset"; @import "modules/fonts";파일을 재구성하고 이름을 먼저 변경했습니다. scss부터 css까지 모든 파일을 다 수정하는 대신 Bash 스크립트를 사용했습니다.
`for f in *.scss; do git mv -- "$f" "${f%.scss}.css"; done;`앞의 밑줄은 Sass를 쓰는 습관이라 이것도 지웠습니다. Bash 명령어를 사용해서 한번에 완료할 수 없어서 하나하나 수동으로 수정만 하면 됩니다.마지막 단계는 모든 CSS 파일을 모듈 폴더로 이동하고 부분 폴더를 삭제하는 것입니다. 모든 CSS를 모듈/부분으로 나누는 것보다 모듈로 관리하는 것이 더 이해하기 쉽다고 생각합니다.
환경 설정PostCSS CLI로 시작하여 패키지에 임시 빌드 스크립트 명령을 추가했습니다. json:
"scripts": {
"postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}스타일을 변경하지 않고 컴파일했습니다. CSS: `npm run postcss`
는 정상적으로 작동합니다. 콘솔에는 오류가 보고되지 않지만 페이지에는 CSS 스타일이 없습니다. >
빌드 프로세스가 완료되었으니 이제 작업은 스타일을 다시 가져오는 것입니다.
Chrome 콘솔에서 404 메시지를 많이 봤습니다. 우리가 잃어버린 기능은 @import 모듈을 통해 CSS를 도입하는 인라인 @import.tylergaw.css입니다. 브라우저는 이를 확인하고 HTTP 요청을 통해 각 모듈을 로드합니다. , 각 모듈이 아니라 이 때문에 컴파일러에서 찾을 수 없습니다.
기본 @import가 작동하도록 빌드 프로세스를 변경할 수 있지만 이는 비효율적입니다. -style inline @import.
"scripts": {
"postcss": "postcss -u postcss-import -o public/css/tylergaw.css src/css/tylergaw.css"
}npm run postcss를 다시 실행하세요. CSS 파일에는 모든 모듈이 포함되어 있습니다.
이것이 CSS의 미래인가요? Sass에서 @import 함수를 인라인으로 노출하는 것은 매우 강력합니다. 이를 통해 스타일을 더 잘 구성할 수 있습니다. 앞으로 이 함수가 기본적으로 지원될지는 잘 모르겠습니다. 항상 한 단계가 필요합니다.
내 생각에 postcss-import 플러그인은 내 PostCSS의 주요 구성이 될 것이며 다른 사람들에게도 마찬가지일 것이라고 생각합니다. 플러그인 작성자의 의견은 아래에 인용되어 있습니다. 
이 플러그인은 아마도 목록의 첫 번째 플러그인으로 사용되어야 할 것입니다. 이렇게 하면 다른 플러그인이 처리할 파일이 하나만 있는 것처럼 AST에서 작동하며 아마도 귀하처럼 작동할 것입니다. 다른 언어는 아닙니다. 일부 기능은 이미 브라우저에서 지원됩니다.
CSSnext를 사용하여 누락된 부분을 채웁니다. 공백이 남아 있는 Sass 기능.
브라우저 전용 접두사
저는 이 사이트를 구축하기 전에 사용자 정의 Sass 믹스인을 사용하여 필수 접두사를 추가하는 문제를 해결했습니다. Autoprefixer를 사용하면 이 하이브리드 매크로 모듈 전체를 제거할 수 있습니다. 변수
다음으로 Sass 변수를 CSS 사용자 정의 속성으로 변경합니다. 예를 들어 _setup.scss에서 다음과 같이 작성합니다. 🎜>[postcss-import]
제가 사용하는 모든 Sass 변수는 아니지만 나머지는 별도의 모듈에 있습니다.
注意: 自定义属性和变量的区别.CSS自定义属性只在属性值有效,不能用于选择器,属性名或媒体查询.
新的setup.css:
:root {
--white: #fff;
--grey: #1e1e1d;
--yellow: #ffad15;
--offwhite: #f8f8f8;
...
}
以下为使用示例:
a {
color: var(--yellow);
}
除了语法,CSS自定义属性和Sass变量工作方式是相同的.由于浏览器支持的限制,自定义属性值仍然需要编译.在上面的示例中,编译后的值为color: #ffad15.
颜色函数
在之前的例子中,我遗漏了一个变量:$darkerwhite: darken($offwhite, 15);.这是另一个我需要寻找替代的Sass特性.这里有一个规范草案提供CSS颜色函数.cssnex现在包含这些函数,这非常酷.下面是setup.css,其中darkerwhite自定义属性是通过颜色函数和阴影调节器来实现的.
:root {
...
--offwhite: #f8f8f8;
--darkerwhite: color(var(--offwhite) shade(20%));
...
}
颜色函数提供了许多调节器.你可以在一个函数中使用多个调节器:
`background-color: color(#d32c3f shade(40%) alpha(40%));`
编译结果为:
`background-color: rgba(127, 26, 38, 0.4);`
再次重申,现在cssnext会将color()编译为16进制或rgba的色值.当颜色函数得到浏览器支持后,编译过程就没有必要了.颜色操作在运行时就可以发生.
嵌套
嵌套是CSS预处理器不可或缺的特性.任何让人舒服的样式工具的必需品.Tab Atkins对CSS嵌套有一个正在进行中的规范,并且cssnext让它成为现实.
CSS的嵌套语法包含一个前置于内层的&,以下为sass片段:
.projects-list {
...
li {
& > p {...}
}
a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}
对于CSS嵌套,我将它修改为以下形式:
.projects-list {
...
& li {
& > p {...}
}
& a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}
基本的嵌套需要前置的&.伪类和选择器在Sass和CSS中是相同的.媒体查询不需要前置&.
另外值得注意的是@nest.正如文档中提到的,复杂的嵌套可能需要引入@nest来代替&.这个项目我还没有用到,或许将来用得到.
拓展和占位类
Sass中的@extend和占位类是我经常使用的两个特性。下面是Futura头部的样式示例：
%futura {
font-family: 'futura-pt', helvetica, sans-serif;
}
%futura-heading {
@extend %futura;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
}
这是一个用例：
.my-heading {
@extend %futura-heading;
}
我在之前了解过CSS自定义属性的用法。这里有一个正在进行中的@apply规则的规范与之相关。@apply允许储存一系列的属性并且在选择器引用。我用@apply来代替Sass的extend.
回到setup.css来,我更新了Futura头部的属性:
:root {
...
--franklin: {
font-family: 'futura-pt', helvetica, sans-serif;
};
--franklin-heading: {
@apply --franklin;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
};
}
这里是一个示例:
.my-heading {
@apply --franklin-heading;
}
@apply不是继承.在目前的cssnext中,@apply将属性和值直接复制到每条规则中.这是个小项目所以没问题.但是在大型的项目中,可能会导致样式冗余,项目非常臃肿.这种情况下最好还是使用通用类名来适用相似情况.
现在我的网站看起来和之前一样了.项目页是个例外.它的每个磁贴区域都有不同颜色.接下来我会解释怎么在没有Sass的情况下正确且高效的编写样式.
带参数的混合宏
我用Sass的混合宏来让项目编写样式更简便.这个混合宏有一个磁贴颜色的参数.以下是这个project-block的混合宏.
@mixin project-block ($c) {
background-color: $c;
a {
color: $c;
&:hover {
background-color: $c;
color: $offwhite);
}
}
}
下面是一个示例:
.p-jribbble {
@include project-block(#ff0066);
}
在写这篇文章的时候,我还没有在CSS找到能模拟这个功能的特性.自定义属性配合@apply不是函数,所以我们不能为它传递参数.在将来,自定义选择器可能会允许使用参数.在草案规范中有一个看起来很有前途的复杂示例.但我承认现在我还没完全明白它是怎么工作的.
这不意味着我运气不好.我写CSS的时间要长于Sass,但也没多久.我还用了另一个正进行中的规范特性,matches选择器.
下面是一个代替project-block混合宏的CSS示例:
.p-jribbble,
.p-jribbble a:matches(:hover, :focus) {
background-color: var(--color-jrb);
& a {
color: var(--color-jrb);
}
}
颜色变量是早些在文件中:root作用域定义的.cssnext将以上CSS编译为:
.p-jribbble,
.p-jribbble a:hover,
.p-jribbble a:focus {
background-color: #ff0066
}
.p-jribbble a,
.p-jribbble a:hover a,
.p-jribbble a:focus a {
color: #ff0066;
}
最后两个选择器...a a:hover和...a a:focus匹配不到任何元素.他们是不必要的.但是除了占用几比特的空间他们也没有任何影响.为了代码的可读性,我更倾向于a选择器的嵌套.
更多PostCSS特性
为了样式按顺序回归,我决定利用更多的PostCSS插件.我用css mqpacker来合并使用相同查询条件的媒体查询.我也用cssnano来优化代码.
这也是为什么我期待去使用PostCSS.使用Sass的时候我感觉困在当前的特性中.但因为PostCSS本质是一个插件集合在工作,更具拓展性.如果我有特殊需要,我可以自己来写一个插件.它的潜力令人兴奋.
我妥协了
在使用这个新工具工作了几天后,我完全投入进去了.从Sass转向新的CSS语法非常简单,并且是在五六年间我每个项目都用Sass编写的情况下.
我喜欢这个思想转变.cssnext对CSS的处理很像Babel对Javascript.它们都允许你去使用未来的特性来编写代码.
저는 수년간 Sass를 사용해 왔지만 최근에는 PostCSS와 해당 플러그인을 사용하여 스타일을 시험해 보고 싶었습니다. 이제 미래의 CSS 기능을 사용할 수 있게 되어 훨씬 더 좋아졌습니다. 내 개인 사이트는 새로운 기능을 시험해 볼 수 있는 가장 좋은 장소입니다.
첫 번째 단계는 내 Sass 사용 목록을 만드는 것입니다. 내가 사용하는 기능과 새로운 기능이 작동할 것이라고 확신합니다. 이 프로젝트에서 내가 사용하는 기능은 다음과 같습니다.
부분 가져오기
변수 )
중첩
믹스인
확장 )
자리 표시자 클래스
색상 기능(어둡게 및 RGB 색상 기능)
-
압축
준비
새 구문으로 전환한 후 몇 가지 준비가 필요합니다. 이제 프로젝트의 디렉터리 구조는 Sass 사용에 일반적입니다. 이름은 밑줄(_)을 사용합니다. 파일이고 파일 확장자는 scss입니다. 저는 Sass 파일을 정리하기 위해 두 개의 폴더를 사용합니다. 모듈 폴더에는 변수, 자리 표시자 클래스 및 mixins와 같은 CSS를 직접 생성하지 않는 Sass 파일이 CSS로 컴파일되어 저장됩니다. .
원래 파일 구조는 다음과 같습니다.
css/ scss/ modules/ _module.scss ... partials/ _partial.scss ... tylergaw.scss
각 Sass 구성 요소는 tylergaw.scss에 도입됩니다.
@import "modules/setup"; @import "modules/reset"; @import "modules/fonts";
파일을 재구성하고 이름을 먼저 변경했습니다. scss부터 css까지 모든 파일의 suffix를 하나씩 수정하는 대신 Bash 스크립트를 사용하여 작업을 진행했습니다. .Bash 명령을 사용하여 한 번에 완료할 수 없으므로 각각 수동으로만 수정하면 됩니다.
마지막 단계는 모든 CSS 파일을 모듈 파일 폴더로 이동하고 부분 폴더를 삭제하는 것입니다. 모든 CSS를 모듈/부분으로 나누는 것보다 모듈로 관리하는 것이 더 이해하기 쉽다고 생각합니다.
환경 설정
저는 PostCSS CLI를 다음과 같이 사용합니다. 시작하려면 임시 빌드를 추가했습니다. package.json의 스크립트 명령:
`for f in *.scss; do git mv -- "$f" "${f%.scss}.css"; done;`
스타일을 변경하지 않고 CSS:
"scripts": {
"postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}
를 컴파일했는데 콘솔이 제대로 작동하지 않았습니다. 오류가 보고되었지만 CSS 스타일이 없습니다.
빌드 프로세스가 가능하며 현재 작업은 스타일을 다시 가져오는 것입니다.
Chrome에서는 404가 많이 보입니다. 이는 우리가 누락한 첫 번째 기능이 @import를 통해 CSS 모듈을 도입하는 인라인 @import.tylergaw.css라는 것을 의미합니다. 브라우저는 이를 보고 무엇을 할지 알고 있습니다. 내 빌드 프로세스는 각 모듈이 아닌 별도의 CSS 파일만 복사합니다. 이 때문에 브라우저는 해당 파일을 찾을 수 없습니다.
기본 @import가 작동하도록 빌드 프로세스를 변경할 수 있습니다. 하지만 이는 비효율적입니다.
첫 번째 플러그인
postcss-import 플러그인을 npm을 통해 설치한 후 Sass에서 사용할 수 있습니다. 빌드 스크립트 코드를 업데이트했습니다:
`npm run postcss`
npm run postcss를 다시 실행하세요. 단일 CSS 파일에 모든 모듈이 포함되어 있습니다. 현재 페이지에는 일부 스타일이 표시됩니다.
이것이 CSS의 미래는?
Sass에서 @import 함수를 인라인으로 노출하는 것은 매우 강력합니다. 이를 통해 스타일을 더 잘 구성할 수 있습니다. 앞으로 이 함수가 기본적으로 지원될지는 잘 모르겠습니다. 항상 한 단계가 필요합니다.
내 생각에 postcss-import 플러그인은 내 PostCSS의 주요 구성이 될 것이며 다른 사람들에게도 마찬가지일 것이라고 생각합니다. 플러그인 작성자의 의견은 아래에 인용되어 있습니다.
이 플러그인은 아마도 목록의 첫 번째 플러그인으로 사용되어야 할 것입니다. 이렇게 하면 다른 플러그인이 처리할 파일이 하나만 있는 것처럼 AST에서 작동하며 아마도 귀하처럼 작동할 것입니다. 다른 언어는 아닙니다. 일부 기능은 이미 브라우저에서 지원됩니다.브라우저 전용 접두사저는 이 사이트를 구축하기 전에 사용자 정의 Sass 믹스인을 사용하여 필수 접두사를 추가하는 문제를 해결했습니다. Autoprefixer를 사용하면 이 하이브리드 매크로 모듈 전체를 제거할 수 있습니다. 변수 다음으로 Sass 변수를 CSS 사용자 정의 속성으로 변경합니다. 예를 들어 _setup.scss에서 다음과 같이 작성합니다. 🎜>CSSnext를 사용하여 누락된 부분을 채웁니다. 공백이 남아 있는 Sass 기능.
"scripts": {
"postcss": "postcss -u postcss-import -o public/css/tylergaw.css src/css/tylergaw.css"
}
이것이 제가 사용하는 Sass 변수의 전부는 아니지만 기본적으로 나머지는 별도의 모듈에 있습니다.
참고: 사용자 정의 속성과 CSS 사용자 정의 속성의 차이점은 유효합니다. 속성 값에 있으며 선택기, 속성 이름 또는 미디어 쿼리에는 사용할 수 없습니다.
새 setup.css:
:root {
--white: #fff;
--grey: #1e1e1d;
--yellow: #ffad15;
--offwhite: #f8f8f8;
...
}
以下为使用示例:
a {
color: var(--yellow);
}
除了语法,CSS自定义属性和Sass变量工作方式是相同的.由于浏览器支持的限制,自定义属性值仍然需要编译.在上面的示例中,编译后的值为color: #ffad15.
颜色函数
在之前的例子中,我遗漏了一个变量:$darkerwhite: darken($offwhite, 15);.这是另一个我需要寻找替代的Sass特性.这里有一个规范草案提供CSS颜色函数.cssnex现在包含这些函数,这非常酷.下面是setup.css,其中darkerwhite自定义属性是通过颜色函数和阴影调节器来实现的.
:root {
...
--offwhite: #f8f8f8;
--darkerwhite: color(var(--offwhite) shade(20%));
...
}
颜色函数提供了许多调节器.你可以在一个函数中使用多个调节器:
`background-color: color(#d32c3f shade(40%) alpha(40%));`
编译结果为:
`background-color: rgba(127, 26, 38, 0.4);`
再次重申,现在cssnext会将color()编译为16进制或rgba的色值.当颜色函数得到浏览器支持后,编译过程就没有必要了.颜色操作在运行时就可以发生.
嵌套
嵌套是CSS预处理器不可或缺的特性.任何让人舒服的样式工具的必需品.Tab Atkins对CSS嵌套有一个正在进行中的规范,并且cssnext让它成为现实.
CSS的嵌套语法包含一个前置于内层的&,以下为sass片段:
.projects-list {
...
li {
& > p {...}
}
a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}
对于CSS嵌套,我将它修改为以下形式:
.projects-list {
...
& li {
& > p {...}
}
& a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}
基本的嵌套需要前置的&.伪类和选择器在Sass和CSS中是相同的.媒体查询不需要前置&.
另外值得注意的是@nest.正如文档中提到的,复杂的嵌套可能需要引入@nest来代替&.这个项目我还没有用到,或许将来用得到.
拓展和占位类
Sass中的@extend和占位类是我经常使用的两个特性。下面是Futura头部的样式示例：
%futura {
font-family: 'futura-pt', helvetica, sans-serif;
}
%futura-heading {
@extend %futura;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
}
这是一个用例：
.my-heading {
@extend %futura-heading;
}
我在之前了解过CSS自定义属性的用法。这里有一个正在进行中的@apply规则的规范与之相关。@apply允许储存一系列的属性并且在选择器引用。我用@apply来代替Sass的extend.
回到setup.css来,我更新了Futura头部的属性:
:root {
...
--franklin: {
font-family: 'futura-pt', helvetica, sans-serif;
};
--franklin-heading: {
@apply --franklin;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
};
}
这里是一个示例:
.my-heading {
@apply --franklin-heading;
}
@apply不是继承.在目前的cssnext中,@apply将属性和值直接复制到每条规则中.这是个小项目所以没问题.但是在大型的项目中,可能会导致样式冗余,项目非常臃肿.这种情况下最好还是使用通用类名来适用相似情况.
现在我的网站看起来和之前一样了.项目页是个例外.它的每个磁贴区域都有不同颜色.接下来我会解释怎么在没有Sass的情况下正确且高效的编写样式.
带参数的混合宏
我用Sass的混合宏来让项目编写样式更简便.这个混合宏有一个磁贴颜色的参数.以下是这个project-block的混合宏.
@mixin project-block ($c) {
background-color: $c;
a {
color: $c;
&:hover {
background-color: $c;
color: $offwhite);
}
}
}
下面是一个示例:
.p-jribbble {
@include project-block(#ff0066);
}
在写这篇文章的时候,我还没有在CSS找到能模拟这个功能的特性.自定义属性配合@apply不是函数,所以我们不能为它传递参数.在将来,自定义选择器可能会允许使用参数.在草案规范中有一个看起来很有前途的复杂示例.但我承认现在我还没完全明白它是怎么工作的.
这不意味着我运气不好.我写CSS的时间要长于Sass,但也没多久.我还用了另一个正进行中的规范特性,matches选择器.
下面是一个代替project-block混合宏的CSS示例:
.p-jribbble,
.p-jribbble a:matches(:hover, :focus) {
background-color: var(--color-jrb);
& a {
color: var(--color-jrb);
}
}
颜色变量是早些在文件中:root作用域定义的.cssnext将以上CSS编译为:
.p-jribbble,
.p-jribbble a:hover,
.p-jribbble a:focus {
background-color: #ff0066
}
.p-jribbble a,
.p-jribbble a:hover a,
.p-jribbble a:focus a {
color: #ff0066;
}
最后两个选择器...a a:hover和...a a:focus匹配不到任何元素.他们是不必要的.但是除了占用几比特的空间他们也没有任何影响.为了代码的可读性,我更倾向于a选择器的嵌套.
更多PostCSS特性
为了样式按顺序回归,我决定利用更多的PostCSS插件.我用css mqpacker来合并使用相同查询条件的媒体查询.我也用cssnano来优化代码.
这也是为什么我期待去使用PostCSS.使用Sass的时候我感觉困在当前的特性中.但因为PostCSS本质是一个插件集合在工作,更具拓展性.如果我有特殊需要,我可以自己来写一个插件.它的潜力令人兴奋.
我妥协了
在使用这个新工具工作了几天后,我完全投入进去了.从Sass转向新的CSS语法非常简单,并且是在五六年间我每个项目都用Sass编写的情况下.
我喜欢这个思想转变.cssnext对CSS的处理很像Babel对Javascript.它们都允许你去使用未来的特性来编写代码.
更多从sass到PostCSS 相关文章请关注PHP中文网！