Kotlin 스타일의 CSS 전역 적용

스칼라블에서 우리는 코틀린의 모든 것을 사랑한다.우리는 그것을 사용하여 앞부분, 뒷부분, 그리고 둘 사이의 어느 곳이든 처리한다.
우리는 Kotlin 생태계에서 코드를 최대한 깨끗하고 쉽게 사용할 수 있도록 하는 것에 대해 매우 흥분했다.엔지니어의 신속한 개발을 장려하는 환경을 형성하고 효과적이고 이해할 수 있는 모델을 응용할 수 있다.우리는 @sKalable에 매우 열중합니다.
오늘 우리는 KotlinJS 프로젝트에서 CSS의 글로벌 스타일을 소개할 것이다.
우선 우리가 이루고 싶은 목표의 전망이 어떤지 살펴봐야 한다.

위의 도표를 보았을 때, 이것은 프로젝트 주체의 모든 이미지에 Img CSS 적용하기를 희망한다는 것을 나타낸다.

기본 설정 가져오기

때로는 기초부터 시작하는 것이 가장 좋다.이 예에서, 우리는 문서에 img의 기본 구성 요소만 만들 것입니다.

fun main() {
    window.onload = {
        render(document.getElementById("root")) {
            /**
             * Load our image in the body without any CSS applied directly
             */
            img(
                alt = "Skalable Logo",
                src = "YOUR IMAGE URL"
            ) {}
        }
    }
}

위의 명령을 실행하면 다음과 같은 내용을 보여 줍니다.

적어도 큰 면은 있다고 할 수 있다.우리는 그것이 전체 홈페이지를 차지하는 것을 볼 수 있다.어떤 경우 이것은 당신이 원하는 것일 수도 있지만, 절대로 기본값이 되어서는 안 된다.
그러면 우리는 어떻게 모든 이미지를 위해 이 문제를 해결합니까?

전 세계로 나아가다

전역 스타일을 응용하면 프로젝트에 커다란 이익을 가져다 줄 수 있습니다.기본 탭의 기본 스타일과 글꼴을 결정할 수 있습니다. p 또는 h1 h2 등입니다.
프로젝트에 전역 스타일을 추가하려면 몇 가지 방법이 있습니다.우리는 @sKalableSRP을 선택하는 경향이 있다. - "한 종류가 바뀐 이유가 하나밖에 없어야 한다."
이곳의 정보는 당신의 논리를 서로 다른 관심 분야로 나누는 것이다.스타일즈를 통해 이를 실현하기 위해서, 우리는 프로젝트의 모든 전역 스타일을 관리할 수 있는 GlobalStyles 대상을 만들 수 있습니다.

object GlobalStyles : StyleSheet("GlobalStyles") {}

비록 지금은 벌거벗었지만, 우리는 Kotlinks를 위해 영원히 빛나는 Kotlin-Styled 도서관을 찾아야 한다.
주: 본문을 작성할 때 전체적인 스타일 방법과 자술한 문서에 열거된 방법은 작용하지 않습니다.의학 박사
우리의 글로벌 스타일로 우리의 스타일시트를 채우는 것은 매우 쉽다 3.14 .
우선, 우리는 페이지 주체의 초기 스타일을 성명해야 한다.

object GlobalStyles : StyleSheet("GlobalStyles") {
    private val styles = CSSBuilder().apply {
        body {
            /**
             * Gives the body the following css globally (there is only ever one body)
             *
             *  - Sets the maxWidth with to the size available for the content.
             *  - Adds Auto Margin to the body allowing everything to be centered.
             *  - Creates a padding of 100px all around the body
             */
            maxWidth = LinearDimension.maxContent
            margin(LinearDimension.auto)
            padding(100.px)
            /**
             * We can visualise this much better if we give the background a grey colour.
             */
            backgroundColor = Color.darkGray
        }
    }
}

이 스타일을 적용할 수 없습니다. 우선 전역setter Kotlin-Styled 에 주입해야 합니다.혼동과 준수 SRP 를 일으키지 않는 상황에서, 우리는 스타일시트에서 이 처리 함수를 직접 만들 수 있습니다.이렇게 하면 GlobalStyles 중의 모든 양식을 사유로 유지하는 것을 허용할 것이다.

//Inside GlobalStyles at the bottom 

    /**
     * By creating a wrapper function in our Global Styles, it gives
     * the global style sheet the capability to have the styles set as private.
     */
    fun applyGlobalStyle() {
        styled.injectGlobal(styles.toString())
    }

그러면 우리는 언제 이 새로운applyGlobalStyle 기능을 사용합니까?
바로 우리client반에서!

fun main() {
    /**
     * Using our global styles object we
     * can call our wrapper function to apply
     * the global styles to our project.
     */
    GlobalStyles.applyGlobalStyle()
    window.onload = {
        render(document.getElementById("root")) {
            /**
             * Load our image in the body without any CSS applied directly
             */
            img(
                alt = "Skalable Logo",
                src = "YOUR IMAGE URL"
            ) {}
        }
    }
}

위의 코드를 적용하고 실행하면 다음과 같은 결과를 얻을 수 있습니다.

알아, 징그러워.어떻게 된 거야?이 모든 것은 풍격의 운용이라는 커다란 긍정적인 의의를 가지고 있다.이 모든 것에서, 우리는 이미지에 대해 어떠한 특별한 처리도 하지 않았다.분명히 말할 때가 됐어.

단일 구성 요소에 글로벌 CSS 적용

GlobalStyles 대상에 돌아가서 img에 body 표시를 추가하고 css를 적용할 것입니다.

body {
    ... // CSS for Body Tag

    /**
     * When you want to apply a base CSS style to components within the
     * body its as simple as nesting that component within and setting
     * the CSS that you like.
     */
    img {
        maxWidth = 500.px
    }
}

지금 어디 가?그림 css를 프로젝트의 모든 img 표시에 적용했습니다.경탄할 만한!

확장성 최적화

모든 인터넷 엔지니어들은 당신 css 의 정결을 유지하는 것이 얼마나 중요한지 안다.이 이념을 응용하는 가장 좋은 방법은 그것부터 시작하는 것이다.우리의 모든 것이 정상적으로 작동하기 때문에 우리는 모든 구성 요소를 개체css로 추상화하여 가독성을 높이고 내용을 유지하도록 한다sKalable(내가 거기서 무엇을 했는지 보이니?)
우리 GlobalStyles 로 돌아가면, 우리는 이미지 스타일을 자기 것으로 추상화할 것이다. RuleSet이후에 우리는 그것을 img의 body 표기에 다시 적용할 것이다.

// Inside GlobalStyles below styles val.

    /**
     * Im order to not overwhelm your fellow engineers, we can
     * extract styles into separate CSS components.
     *
     * This is particularly useful when you have quite a few different styles.
     */
    private val baseImg by css {
        maxWidth = 500.px
    }

현재 우리는 img css를 추상화했다. 우리는 간단한 body 조작부호UnaryPlus로 +에 추가할 수 있다.

body {
    ... // CSS for Body Tag

    /**
     * When you want to apply a base CSS style to components within the
     * body its as simple as nesting that component within and setting
     * the CSS that you like.
     */
    img {
        +baseImg
    }
}

이것이 바로 우리의 글로벌 스타일시트입니다. 이것은 당신의 프로젝트 수요에 따라 증가할 것입니다.
마음대로 댓글이나 연락 주세요@sKalable 우리는Kotlin의 한 기구로 유지보수, 맞춤형, 유연성, 그리고 sKalable을 확보하기 위해 코드를 구축해야 한다. (나는 또 이렇게 했다)
샘플 항목 보기here
귀하의 비즈니스 요구 사항을 충족할 수 있도록 Kotlin Multi Platform의 최신 정보를 확인하십시오.