SASS의 SCSS 기법을 만져 보았습니다.

9182 단어 Sassscss루비

TL;DR



다음 기사(2017년)를 바탕으로 SASS를 만져 보았습니다.
이제부터 CSS는 Sass로 쓰자.

전제 1


  • OS: macOS High Sierra 10.13.6
  • Docker 18.06.0-ce (client, server 모두)

    • 운영 환경



    루비 환경을 쉽게 준비 할 수 있기 때문에 Docker를 사용하십시오 2
    sass는 3.5.7이 설치되었습니다.

    Dockerfile
    FROM ruby:2.5.1

RUN gem install sass

    docker-compose.yml
    version: '2'
services:
  scss:
    build: .
    volumes:
      - .:/var/www/scss
    stdin_open: true
    tty: true

    작동하려면
  • docker-compose up -d
  • docker exec -it <フォルダ名>_scss_1 bash

    • SCSS 기법으로 CSS 만들기



    위의 기사를 참고하여 변수, 연산, 함수, @extend (스타일 상속)

    test.scss
    $bg_color: lightgreen;
$strong_em: 2em;

@function Double($value) {
  @return round($value * 2);
}

div{
  background-color: $bg_color;
  margin: 0 auto;
  p{
    padding: 0 0 0 10px;
    span{
      font-size: Double($strong_em);
    }
  }
}

.btn{
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 3px;
  background-color: lightgray;
}

.btn-submit{
  @extend .btn;
  background-color: lightblue;
  font-size: 1.5em;
}

    CSS의 작성 커멘드는 이하. 3sass test.scss:test.css -style expanded
    test.css
    div {
  background-color: lightgreen;
  margin: 0 auto; }
div p {
  padding: 0 0 0 10px; }
div p span {
  font-size: 4em; }

.btn, .btn-submit {
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 3px;
  background-color: lightgray; }

.btn-submit {
  background-color: lightblue;
  font-size: 1.5em; }

/*# sourceMappingURL=test.css.map */

    HTML에 맞춰 본다.

    test.html
    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SASSのテスト</title>
  <link rel="stylesheet" href="test.css">
</head>
<body>
  <div>
    div要素です。
    <p>
      div要素の中のp要素です。
      <span>span要素です</span>
      div要素の中のp要素です。
    </p>
    div要素です。
  </div>
  <input type="submit" class="btn">
  <input type="submit" class="btn-submit">
</body>
</html>



    끝에


  • 프런트 엔드의 경험이 전혀 적은 몸의 감상입니다만, 함수나 계승을 사용할 수 있어 꽤 좋은 느낌. 문서 등 확인해 가고 싶다.
  • 이번에 CSS 파일이 생겼으므로, 이하의 에러는 쫓고 있지 않다. 숙제 사항

    • error No such file or directory@rb_sysopen - expanded
  • 최근 rails 개발로 bundle install하면 2019년 3월에 sass가 deprecated라고 표시되므로, 이 기기에 대응도 체크한다. (이하 발췌하여 인용)

    • Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.
    * If you use Sass as a plug-in for a Ruby web framework, we recommend using the
    sassc gem : htps : // 기주 b. 코 m / 탓 s / 흠 sc-by # Rea d

    각주





    버전은 나중에 추가됩니다. → 추가했습니다 ↩

    docker-compose.yml이지만 Dockerfile에서 debugger를 사용하기위한 gem을 넣지 않았기 때문에 stdin_open와 tty의 설정이 필요하지 않았다는 것을 깨달았습니다. ↩

    참고: Sass 치트 시트 명령 ¦ ↩
    Javascript를 사용하여 사용자 위치를 감지하는 방법
    Excel 통합 문서에서 SQLite 데이터베이스 생성.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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