node-sass에서 Compass를 적용하기위한 메모

13405 단어 node-sass메모자신의 메모Compass

Sass란?


  • CSS 메타언어
  • CSS를 명확하게 작성할 수 있습니다

  • 확장자는 .sass 및 .scss

    • Sass란? Sass의 기본 정보

    Sass와 Scss는 무엇이 다른가요?



    쓰는 방법이 미묘하게 다르다.
  • Sass가 중괄호 없이, Scss가 중괄호 있음.
  • Scss 쪽이 주류

    • Sass와 SASS와 SCSS의 차이점에 대해

    node-sass


  • Sass의 공식 구현은 Ruby에서 수행되었지만 C/C++에서 개발 된 node-sass는 더 빠릅니다
  • node-sass는 Node.js 이외에도 사용할 수 있습니다

    • Sass(Node-sass)의 환경 구축을 해본다

    node-sass의 환경 구축과 사용법



    다음 사이트가 이해하기 쉽기 때문에 할애
    htps : ///--우우 b-오이 9개 9bc8t구2아. 코 m/인 t로- 싯 s/

    실제로 사용해보기



    이것을 실제로 CSS로 컴파일 해보십시오.
    【CodePen】Parallax Star background in CSS
  • parallax-star.html 
    • <!DOCTYPE html>
<html lang='ja'>

<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" type="text/css" href="parallax-star.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id='stars'></div>
    <div id='stars2'></div>
    <div id='stars3'></div>
    <div id='title'>
        <span>
            PURE CSS
        </span>
        <br>
        <span>
            PARALLAX PIXEL STARS
        </span>
    </div>
</body>
</html>
  • parallax-star.sass 
    • @import compass


// n is number of stars required
@function multiple-box-shadow ($n) 
  $value: '#{random(2000)}px #{random(2000)}px #FFF'
  @for $i from 2 through $n
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'

  @return unquote($value)

$shadows-small:  multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big:    multiple-box-shadow(100)

html
  height: 100%
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
  overflow: hidden

#stars
  width: 1px
  height: 1px
  background: transparent
  box-shadow: $shadows-small
  animation         : animStar 50s linear infinite

  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 1px
    height: 1px
    background: transparent
    box-shadow: $shadows-small

#stars2
  width: 2px
  height: 2px
  background: transparent
  box-shadow: $shadows-medium
  animation         : animStar 100s linear infinite

  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 2px
    height: 2px
    background: transparent
    box-shadow: $shadows-medium

#stars3
  width: 3px
  height: 3px
  background: transparent
  box-shadow: $shadows-big
  animation         : animStar 150s linear infinite

  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 3px
    height: 3px
    background: transparent
    box-shadow: $shadows-big

#title
  position: absolute
  top: 50%
  left: 0
  right: 0

  color: #FFF
  text-align: center
  font-family: 'lato',sans-serif
  font-weight: 300
  font-size: 50px
  letter-spacing: 10px

  margin-top: -60px
  padding-left: 10px

  span
    background: -webkit-linear-gradient(white, #38495a)
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent

@keyframes animStar
  from  
    transform: translateY(0px)
  to        
    transform: translateY(-2000px)

    명령 실행node-sass parallax-star.sass parallax-star.css
    다음 오류가 발생함
    {
  "status": 1,
  "file": "C:/hoge/hoge/sass-test.sass",
  "line": 1,
  "column": 1,
  "message": "File to import not found or unreadable: compass.",
  "formatted": "Error: File to import not found or unreadable: compass.\n        on line 1 of sass-test.sass\n>> @import \"compass\";\n\n   ^\n"
}

    오류 내용으로 compass를 가져올 수 없다는 것을 좋아하지 않는 것 같습니다.

    Compass 적용



    Compass를 적용하고 싶지만, Compass는 Ruby의 확장 기능이므로 이번 사용하고 있는 node-sass에서는 사용할 수 없는 것 같다.
    그러나 이것을 적용하면 사용할 수 있다.
    compass-mixins

    Clone이나 DL 해와,
    sass 의 @Compass 를 @compass-mixins/lib/compass


    요약



    Compass는 Sass에서 밖에 사용할 수 없거나 2014년부터 최신 버전이 나오지 않기 때문에 지금부터 새롭게 만들면 사용하지 않는 것이 좋을 것 같다고 생각했다.
    【Excel VBA】직사각형 Shape끼리의 포함 관계를 문장으로 출력한다
    Shadertoy 시작 week #2

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage