PHP로 sass 사용

6465 단어 PHP
PHP로 SCSS에서 CSS를 생성하는 데 필요한 SCSS 컴파일러를 실행할 수 있는 프로그램 라이브러리는 php-Sass입니다.
php-sass 설치
composier에 프로그램 라이브러리를 설치합니다.
단말기
composer require panique/php-sass
PHP 파일에 대한 기술
PHP 파일을 준비합니다.
index.php
<?php
require 'vendor/autoload.php';

if($_SERVER['SERVER_NAME'] == 'localhost') {
    SassCompiler::run("scss/", "css/");
}
?>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="main">
        <h1 class="title">Hello php-sass</p>
    </div>
</body>
</html>
PHP 파일에서 Sass Compuiler 호출::run () 방법으로 SCSS의 입력 목적지와 CSS의 출력 목적지를 지정합니다.
SCSS 파일의 기술
SCSS 파일을 준비합니다.
base.scss
// 変数
$font-color: #333333;
$bg-color: #CCCCCC;
$font-size-default: 16px;

body {
  color: $font-color;
  background: $bg-color;
}
style.scss
@import "base"; // インポート

// コメント（コンパイル後残らない）

%text {/* コメント（コンパイル後も残る） */
  font-size: $font-size-default * 2;  // オペレーター
  text-align: center;
}

// ネスト
.main {
  h1 {
    // 継承
    @extend %text;
    margin-top: 80px;
  }
}

// ミックスイン
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.title { @include transform(rotate(30deg)); }
SCSS 파일에서 CSS 파일로 컴파일
SCSS 파일을 편집하고 저장한 후 컴파일합니다. css 폴더의 스타일입니다.회css.
style.css
body {
  color: #333333;
  background-color: #CCCCCC;
}
.main h1 {
  /* コメント（コンパイル後も残る） */
  font-size: 32px;
  text-align: center;
}
.main p {
  margin-top: 80px;
}
.title {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
디렉토리 구성은 다음과 같습니다.
Rails에서 API 응답을 모델로 변환
Nginx rtmp 모듈 은 OBS 추 류 에 맞 춰 생방송 (모니터링) 기능 을 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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