Sass / styled-components

src/SassCom.scss

//훨씬 더 쉬운 sass

//변수 사용하기

$red: #FF0000;

$orange: #FF5E00;

$yellow:#FFE400;

//@mixin - 스타일 정의

// @mixin 믹스인 이름 {

//  //CSS 스타일 내용

// }

// //@include - 믹스인 호출

// @include 믹스인 이름

//class 대신 mixin 사용하면 재사용을 줄일 수 있고 더 편함.

@mixin square($size){

    $calculated: 32px * $size;

    width: $calculated;

    height: $calculated;

}

// Components: anything reusable such as buttons, navbars, cards etc.

.SassCom{

    display: flex;

    .box{

        background: red;

        cursor: pointer;

        transition: all 0.3s ease-in;

        // .red 클래스가 .box와 함께 사용되었을 때

        &.red{

            background: $red;

            @include square(1);

        }

        &.orange{

            background: $orange;

            @include square(2);

        }

        &.yellow{

            background: $yellow;

            @include square(3);

        }

        &:hover{

            background: black;

        }

    }

}

 

src/SassCom.js

import './SassCom.scss';

const SassCom=()=>{

    return(

        <div className="SassCom">

            <div className="box red"/>

            <div className="box orange"/>

            <div className="box yellow"/>

        </div>

    );

}

export default SassCom;

 

src/styles/util.scss

$red: #FF0000;

$orange: #FF5E00;

$yellow:#FFE400;

@mixin square($size){

    $calculated: 32px * $size;

    width: $calculated;

    height: $calculated;

}

믹스인 만들기! 재사용되는 스타일 블록을 함수처럼 사용 가능하다. 

 

src/SassCom.js

@import './styles/utils.scss';

.SassCom{

    display: flex;

    .box{

        background: red;

        cursor: pointer;

        transition: all 0.3s ease-in;

        // .red 클래스가 .box와 함께 사용되었을 때

        &.red{

            background: $red;

            @include square(1);

        }

        &.orange{

            background: $orange;

            @include square(2);

        }

        &.yellow{

            background: $yellow;

            @include square(3);

        }

        &:hover{

            background: black;

        }

    }

}

 

git commit 후 

$yarn eject 

 

config/webpack.config.js 

            {

              test: sassRegex,

              exclude: sassModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 3,

                  sourceMap: isEnvProduction

                    ? shouldUseSourceMap

                    : isEnvDevelopment,

                  modules: {

                    mode: 'icss',

                  },

                }).concat({

                  loader: require.resolve('sass-loader'),

                  options: {

                    sassOptions: {

                      includePaths: [paths.appSrc + '/styles'],

                    },

                    additionalData: `@import 'utils';`

                  }

                }),

              sideEffects: true,

            },

 

$yarn add open-color include-media

 

화면 가로 크기가 768px 미만이 되면 배경색 어둡게 바꾸기

 

src/styles/util.scss

@import '~include-media/dist/include-media';

@import '~open-color/open-color';

$red: #FF0000;

$orange: #FF5E00;

$yellow:#FFE400;

@mixin square($size){

    $calculated: 32px * $size;

    width: $calculated;

    height: $calculated;

}

 

src/SassCom.js에 추가 

background: $oc-gray-2;

    @include media('<768px'){

        background: $oc-gray-9;

    }

 

styled-components

import styled, {css} from 'styled-components';

//이렇게하면 따로 css나 scss 파일 확장해서 사용할 필요 없음.

const Box = styled.div`

    background: ${props => props.color || 'blue'};

    padding: 1rem;

    display: flex;

`;

const Button = styled.button`

    background: white;

    color: black;

    border-radious: 4px;

    padding: 0.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    font-size: 1rem;

    font-weight: 600;

    &:hover{

        background: rgba(255, 255, 255, 0.9);

    }

    ${props => props.inverted &&

        css `

        background: none;

        border: 2px solid white;

        color: white;

        &: hover {

            background: white;

            color: black;

        }`

    };

    & + button {

        margin-left: 1rem;

    }

`;

const StyleComponent = () => (

    <Box color='black'>

        <Button>Hi</Button>

        <Button inverted={true}> 테두리만 </Button>

    </Box>

);

export default StyleComponent;