스타일러스 CSS 프레임워크 사용 방법에 대한 자세한 설명

아래 편집기에서는 스타일러스 CSS프레임워크 사용법에 대한 자세한 설명을 제공합니다. 에디터가 꽤 좋다고 생각해서 지금이라도 공유해서 참고용으로 드리고 싶습니다

스타일러스는 컴파일이 필요한 CSS 언어이므로 자체 파일을 직접 호출할 수 없습니다. 그런 다음 매일 로딩을 수행해야 합니다.

스타일러스는 node.js 지원이 필요한 뛰어난 CSS 컴파일 언어입니다. 첫 번째 단계는 node.js를 설치하는 것입니다.

문제: Windows 디버깅 중에 ctrl+d는 효과가 없습니다. exit ? Windows에서 디버깅 코드를 직접 출력하는 방법

비고: #은 이 줄이 Enter 및 실행 줄임을 의미합니다.

공식 웹사이트 다운로드 nodejs

1

tar xvf node-v0.10.28.tar.gz    
#  cd node-v0.10.28    
#  ./configure    
# make    
# make install    
# cp /usr/local/bin/node /usr/sbin/

2노드 - v 노드 버전 정보를 확인하세요. 반환 정보가 있으면 설치 성공

3 스타일러스 설치

# npm install stylus -g 참고: 찾아야 합니다. -g 또한 환경을 전역 방법으로 구성합니다.

4 스타일러스 디버깅

# stylus   
border-radius()   
  -webkit-border-radius arguments   
  -moz-border-radius arguments   
  border-radius arguments   

body   
  font 12px Helvetica, Arial, sans-serif

a.button   
  border-radius(5px)

Ctrl+D를 입력하여 반환을 디버깅합니다. 결과

반환되는지 확인하세요

body {   
  font: 12px Helvetica, Arial, sans-serif;   
}   
a.button {   
  -webkit-border-radius: 5px;   
  -moz-border-radius: 5px;   
  border-radius: 5px;   
}

5 styus 파일 편집

다음 내용으로 test.styl 파일을 만듭니다.

border-radius()   
  -webkit-border-radius arguments   
  -moz-border-radius arguments   
  border-radius arguments   

body   
  font 12px Helvetica, Arial, sans-serif

a.button   
  border-radius 5px

저장하고 닫은 후 명령줄에서 다음 명령을 실행하세요.

# stylus --compress < test.styl >

테스트 .css 파일을 받으면 내용이 다음과 같은지 확인하세요.

body{   
font:12px Helvetica,Arial,sans-serif
}   
a.button{   
-webkit-border-radius:5px;   
-moz-border-radius:5px;   
border-radius:5px
}

이러한 스타일러스 파일은 CSS로 컴파일됩니다. html로 호출할 수 있는 파일입니다.

부록:

컴파일 파일 예
스타일러스는 파일과 디렉터리도 허용합니다. 예를 들어, css라는 디렉터리는 동일한 디렉터리에서 .css 파일을 컴파일하고 출력합니다.

$ stylus css 다음은 ./public/stylesheets로 출력됩니다:

$ stylus css --out public/stylesheets 또는 일부 파일:

$ stylus one. styl two.styl 개발 목적으로 linenos 옵션을 사용하여 생성된 CSS에 스타일러스 파일 이름과 줄 번호를 표시하라는 지침을 발행할 수 있습니다. Firebug의 FireStylus 확장을 사용하려면

$ stylus --line-numbers 또는 firebug 옵션을 사용하세요.

$ stylus --firebug CSS 변환
CSS를 간결한 스타일러스 구문으로 변환하려면 --css 플래그를 사용할 수 있습니다.

표준 입력을 통한 출력:

$ stylus --css < test.css > test.styl 동일한 기본 이름으로 .styl 파일을 출력합니다.

$ stylus --css test.css 출력 특정 대상:

$ stylus --css test.css /tmp/out.stylCSS 속성 도움말
OS X에서 스타일러스 도움말 은 기본 브라우저를 열고 지정된 속성에 대한 도움말 문서를 표시합니다.

$ stylus help box-shadow Interactive Shell
Stylus REPL(Read-Eval-Print-Loop) 또는 "Interactive Shell"을 사용하면 Stylus의 표현<🎜을 사용할 수 있습니다. > 터미널에서 직접.

선택자 등이 아닌 표현식만 적용할 수 있습니다. 단순화를 위해 -i 또는 --interactive 플래그를 추가합니다:

$ stylus -i

> color = white
=> color - rgb(200 , 50,0)
=> #37cdff
> color
=>
> color
=> CLI 사용법을 설명하세요.

nib를 가져오고 nib의 선형 그라데이션() 메서드를 사용하는 다음 Stylus가 있다고 가정합니다.

@import 'nib'

body

background

: 선형-그라디언트(20px 상단, 흰색, 검정색) 스타일러스(1)를 사용하여 표준 입력 및 출력을 통해 렌더링하려고 하는 첫 번째 작업은 다음과 같습니다.

$ stylus < ; styl 스타일러스가 펜촉을 찾을 수 있는 위치를 모르기 때문에 다음과 같은 오류가 발생할 수 있습니다.

오류: stdin:3
1| 2| @ import ' nib' 4|

5| body

6| 배경: 선형-그라디언트(20px 상단, 흰색, 검정색) 스타일러스

API

플러그인을 추가할 수 있습니다. 검색 경로. --
include
또는 -I 플래그를 사용하면

$ stylus < test.styl --include ../nib/lib가 이제 다음 콘텐츠를 생성합니다. 당신은gradient-data-uri()와 create-gradient-image()가 리터럴 형식으로 출력된다는 것을 알아차렸을 것입니다. 플러그인이
JavaScript
API를 제공할 때 플러그인의 경로를 노출하는 것만으로는 충분하지 않기 때문입니다. 그러나 우리가 원하는 것이 순수한 스타일러스 펜촉기능이라면 그것으로 충분합니다. 아아아아

因此，我们需要做的是使用--use或-u标志。其会找寻node模块（有或者没有.js扩展名）路径，这里的require()模块或调用style.use(fn())来暴露该插件（定义js函数等）。

$ stylus < test.styl --use ../nib/lib/nib生成为：

body {   
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII=");   
  background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #fff), color-stop(1, #000));   
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);   
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);   
  background: linear-gradient(top, #fff 0%, #000 100%);   
}

nodemon 插件

# npm install nodemon -g

var css = require("stylus"),    
    str = require("fs").readFileSync("style.styl", "utf8");   

css.render(str, { filename: "stylus.styl" }, function(err, css) {   
    if (err) throw err;   
    var http = require('http');   
    http.createServer(function (req, res) {   
        res.writeHead(200, {'Content-Type': 'text/css'});   
        res.end(css);   
    }).listen(1337, '127.0.0.1');   
    console.log('已经启动 http://www.php.cn/:1337/');   
});

以上这篇stylus css 框架使用方法深入解析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

위 내용은 스타일러스 CSS 프레임워크 사용 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!