source

WordPress 내 새스

factcode 2023. 3. 20. 23:37

WordPress 내 새스

워드프레스 프로젝트 중 하나(향후 프로젝트에서 일종의 보일러 플레이트가 될 것)에 SAS를 사용하고 싶습니다.이하의 기준에 준거한 방법으로 실시해 나가고 싶다.

패스세스 sass-lint
Wordpress 표준 준수(예: 테마 헤더)
청결, 일관성 및 유지보수가 용이함

몇 가지 아이디어가 있었지만, 위의 기준에 부합하는 것은 하나도 없습니다.

1. 삭제`style.css` Sass만을합니다.

/index.php
/... other wordpress files ...
/assets/sass/main.scss
/assets/sass/...other sass files...

" " " 후sassstyle.css이치노

장점:

일관성.
유지보수가 용이함

단점:

는 SCSS-Lint WordPress를 코멘트를 않습니다.//를 표시합니다.
sass를 컴파일하지 않으면 WordPress 백엔드에서 테마를 선택할 수 없습니다.

. 2. 기껏하다를 하세요.`style.css` Sass를 에 Sass로 합니다.

/index.php
/style.css
/...other wordpress files...
/assets/sass/main.scss
/assets/sass/... other sass files...

장점:

기본적으로 (1)의 단점을 해결합니다.
됩니다.빠른 될 수 있습니다.을 사용하다style.css 도구도 없이

단점:

부정합
용장성
요구('CSS'용 )가 필요합니다.style.css), "sass")

여기서 가장 큰 문제는 컴파일된 SAS를 어디에 둘 것인가 하는 것입니다. the the the style.css꽤 이상해보여요

좋은 생각 있어요?감사합니다!

"style.css"가 필요한 이유는 무엇입니까?

에, 우리가 합니다.style.css

style.css백엔드에서 테마 정보를 표시하려면 파일이 필요합니다.

style.css는, 됩니다.get_stylesheet_uri(), 이것은 「」, 「」를 할 수 stylesheet_uri필터링을 실시합니다.

제 생각에는 워드프레스가 당신의 주제 정보를 강요한다는 사실이style.css약 1032바이트가 추가되어 있기 때문에 설계 불량일 뿐입니다.이는 많은 것은 아니지만 완전히 불필요합니다. 특히 파일 크기가 사이트 성능에 영향을 미치는 가장 큰 요인이기 때문에 피할 수 있는 경우에는 더욱 그렇습니다.

은, 「Drupal CMS」와 같이, 가 다른 되는 「」와는 다릅니다.yourtheme.info 최종 되지 않습니다.

솔루션 1

이제 그 문제를 해결했습니다. 해답이 여기 있습니다.

제 생각에 최선의 접근법은 다음과 같습니다.

로 컴파일합니다(예: 파일style.min.cssimports 및 partials를 사용합니다(http://sass-lang.com/guide#topic-5) 참조).다른 이름을 붙이셔도 됩니다.
든든 theme headers headers headers headers headers headers headers headers headers in in in in in in in in in in in in in in in in in로 남겨주세요.style.css.

예를 들어 다음과 같습니다.

style.css

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/

style.min.css

p{color:red;}h1{color:blue;} ...

할 수 .functions.php 삭제:

function theme_name_stylesheets() {
    wp_enqueue_style('style-name', get_template_directory_uri() . '/style.min.css');
}

add_action( 'wp_enqueue_scripts', 'theme_name_stylesheets' );

자세한 것은, https://codex.wordpress.org/Function_Reference/wp_enqueue_style 를 참조해 주세요.

실행 시, 실행 시wp_head() 안에서headCSS를 사용하다

다음 " " " " 를 실행할 수 .sass-lint파일에는 는 sass 파일이나 sass 에는 남아 .style.css두 세계의 장점을 모두 제공합니다.

이점

sass 파일에 형식의 코멘트가 포함되어 있지 않기 때문에 sass-lint를 전달합니다./* ... */가 에 style.css.style.min.css
스타일시트의 작은 파일 크기(예:style.min.css에는 테마 헤더 정보가 되어 있지 헤더 정보는, 「테마 헤더 정보」에 되어 있습니다.style.css
사이트 퍼포먼스 향상:모든 SCSS 파일이 단일 CSS 파일로 컴파일되므로 서버로 전송되는HTTP 요구의 수가 감소하여 사이트 전체의 퍼포먼스가 향상됩니다.

단점들

2개의 CSS 파일프런트 엔드의 유저에게 송신되는 것은, 큰 단점은 아닙니다.style.min.css가 , " "style.css
Wordpress 커뮤니티에서 사용자에게 혼란을 줄 수 있습니다.대부분의 Wordpress 사용자는 사용자의 스타일이 다음 위치에 있을 것으로 예상합니다.style.css하지만, 이것은 큰 문제가 되지 않을 것이며(특히 주제를 공개하지 않을 경우), 간단한 코멘트로도 해결할 수 있을 것 같습니다.

솔루션 2

이 문제에 대한 또 다른 해결책은 다음과 같이 scss-lint Comment 규칙을 일시적으로 비활성화하는 것입니다.

// scss-lint:disable Comment
/*!
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/
// scss-lint:enable Comment
p {
  font-size: 16px;
}

또, 큰 코멘트의 사용에도 주의해 주세요(즉,/*! ... *//* ... */으로 이 를 sass)의는 안 것을 이는 기본적으로 이 코멘트를 sass의 최소 버전에서 삭제해서는 안 된다는 것을 의미합니다.

이점

1개의 CSS 파일
Wordpress 커뮤니티에서 사용자에게 혼란을 줄 가능성이 적습니다.
댓글 규칙이 일시적으로 비활성화되므로 sass-lint를 전달합니다.
사이트 퍼포먼스 향상: (솔루션1과 같은 이유)

단점들

컴파일된 CSS 파일에 테마 헤더 정보가 포함되어 있기 때문에 스타일시트의 파일사이즈가 커집니다.그러나 이것은 약간의 증가일 뿐이다.

Sass 또는 Grunt/Gulp을 사용하지 않는 최종 사용자는 어떻습니까?

또 다른 코멘트에서 sass나 빌드 자동화 툴을 설치하지 않고 사용자가 사소한 것을 변경할 수 있도록 하고 싶다고 말씀하셨습니다.

그렇다고 빌드 자동화 도구를 사용할 수 없는 것은 아닙니다.솔루션 1 또는 솔루션2의 컴파일된 CSS 파일은 사용자가 쉽게 편집할 수 없기 때문에 최소화할 수 없습니다.이것은, 사이트의 파일 사이즈가 큰 것을 의미하기 때문에, 그 결과, 속도가 느려집니다.

또는, 다음의 2개의 파일을 사용할 수 있습니다.

website.min.css된 SCSS의 : "SCSS"
website.css: 된 SCSS의 " " " SCSS " "

[다시 네 마음대로 이름 지어줘]

Gulp를 하지 않고 경우 sass를 Grunt/Gulp로 할 수 .website.css).functions.php)

Sass 않는 도 타협할 Sass의 Sass의 장점을 할 수 때문입니다.빠른 미니어처를 이용할 수 있기 때문입니다.website.min.css버!!

둘 다 최고야!

sass를 출력하기 위해 styles.css를 사용하는 것은 어떻습니까?이것이 내가 하는 일이며, 당신의 많은 문제를 해결했습니다.

아이 테마로 작업하고 있는지 확인합니다.
서버 대신 워드프레스의 로컬 설치 작업을 수행할 수 있습니다.이 링크는 이 프로세스의 대부분을 지원합니다.이것은 적절한 주제를 고르는 것을 피하는 좋은 방법입니다.컴파일러를 사용하여 출력을 올바른 파일로 전송할 수 있습니다.나는 코알라를 이용하지만, 선택할 수 있는 멋진 코알라가 많이 있다.
으로 생성합니다(예: scs 파일 생성:_theme.scss,_responisve.scss,_animate.scss 참조)
styles.scssfilename을 클릭합니다.
css를 사용하지 않고 가능한 한 많은 scs 리소스를 주입합니다.예를 들어 Bootstrap에는 자체 scs가 있고 Font Awesome과 Animate도 있습니다.
@import 부분 styles.scss을 「」로 설정합니다.style.css 최소- 는최 （ 압축) 버전인 것이 .styles.min.css.
header.php이미 새 sss 파일로 가져오려는 모든 문의 스타일시트를 참조하십시오.
하고 .function.php같은 것을 위해서요.

그리고 그것은 정말로 남은 것이 많지 않다.

편집

설계자가 SCSS에 대한 경험이 부족할 경우 SCSS 파일 내의 CSS를 코드화할 수 있으며, 이는 style.min.css로 컴파일됩니다.당연히 SCSS 기능을 활용하는 것이 훨씬 좋지만, 이는 필요한 경험과 지식을 갖추는 것과 관련된 문제입니다.SCSS를 1개의 파일(style.css)로 심리스하게 컴파일 할 수 있습니다.

credit to cale_b - "디자이너가 작업하기 위한 (및 바닐라 CSS를 사용할 수 있는) "custom.scss" 파일을 만들 수 있습니다.이 파일은 마지막으로 Import되므로 스타일이 다른 scss 규칙보다 우선됩니다."

sass 및 wordpress에서 gulp을 사용하여 컴파일된 sass를 style로 출력합니다.css는 일반적인 워크플로우입니다.

guulfile.devails.guulfile.devel

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    wiredep = require('wiredep').stream,
    $ = gulpLoadPlugins(),
    browserSync = require('browser-sync');
    p = require('./package.json');

gulp.task('sass', function (){
    return gulp.src('scss/**/*.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass())
    .pipe($.concat('style.css'))
    .pipe($.autoprefixer())
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

gulp.task('sass-prod', function (){
    gulp.src('scss/**/*.scss')
    .pipe($.sass())
    .pipe($.cssmin())
    .pipe($.concat('style.css'))
    .pipe($.autoprefixer())
    .pipe(gulp.dest('.'))
});

main.scss

/*!
Theme Name: example
Theme URI: http://example.com
Author: xxxxxx
Author URI: xxxx
Description: xxxxx
Version: 1.0
*/

@import 'vars', 'typography', 'header', 'layout', 'proyectos', 'forms', 'libs';

이 방법으로는 모든 SAS가 컴파일하여 일반 CSS Import를 통해 style.css로 Import하는 main.css 파일이 있습니다.

언급URL : https://stackoverflow.com/questions/34533622/sass-within-wordpress

'source' 카테고리의 다른 글

WordPress MVC는 호환됩니까? (0)	2023.03.20
AngularJs - 스코프에서 동적 스코프 변수 설정 (0)	2023.03.20
WooCommerce 쿠키 및 세션 - 현재 제품 카트 가져오기 (0)	2023.03.20
커스텀 리액트 컴포넌트에 className을 설정할 수 있습니까? (0)	2023.03.20
개체를 JSON 문자열로 변환 (0)	2023.03.20

현재글WordPress 내 새스

spring-boot, asp.net, vuejs2, git, jQuery, MariaDB, java, Excel, php, sql-server, MySQL, AngularJS, oracle, REACTJS, JavaScript, Python, json, Vuex, Wordpress, C,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

factcode

WordPress 내 새스

WordPress 내 새스

1. 삭제`style.css` Sass만을합니다.

. 2. 기껏하다를 하세요.`style.css` Sass를 에 Sass로 합니다.

"style.css"가 필요한 이유는 무엇입니까?

솔루션 1

솔루션 2

Sass 또는 Grunt/Gulp을 사용하지 않는 최종 사용자는 어떻습니까?

guulfile.devails.guulfile.devel

main.scss

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

WordPress 내 새스

WordPress 내 새스

1. 삭제style.css Sass만을합니다.

. 2. 기껏하다를 하세요.style.css Sass를 에 Sass로 합니다.

"style.css"가 필요한 이유는 무엇입니까?

솔루션 1

솔루션 2

Sass 또는 Grunt/Gulp을 사용하지 않는 최종 사용자는 어떻습니까?

guulfile.devails.guulfile.devel

main.scss

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바

1. 삭제`style.css` Sass만을합니다.

. 2. 기껏하다를 하세요.`style.css` Sass를 에 Sass로 합니다.