Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SCSS/SASS classnames bug which starts with '$' '-' #538

Closed
Necmttn opened this issue Nov 6, 2016 · 2 comments
Closed

SCSS/SASS classnames bug which starts with '$' '-' #538

Necmttn opened this issue Nov 6, 2016 · 2 comments

Comments

@Necmttn
Copy link
Contributor

Necmttn commented Nov 6, 2016

Currently I'm developing a website for Restaurant.
for style my components i use one centralize SCSS
./assets/main.scss

...

@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/skel';

@include skel-breakpoints((
		xlarge: '(max-width: 1680px)',
		large: '(max-width: 1280px)',
		medium: '(max-width: 980px)',
		small: '(max-width: 736px)',
		xsmall: '(max-width: 480px)',
		xxsmall: '(max-width: 360px)'
	));

	@include skel-layout((
		reset: 'full',
		boxModel: 'border',
		grid: ( gutters: 2em ),
		breakpoints: (
			large: (
				grid: ( gutters: 1.5em )
			),
			small: (
				grid: ( gutters: 1.25em )
			)
		)
	));

	@mixin inner {
		> .inner {
			@include padding(4em, 0);
			margin: 0 auto;
			max-width: _size(inner);
			width: calc(100% - 6em);

			@include breakpoint(small) {
				@include padding(3em, 0);
				width: calc(100% - 3em);
			}
		}
	}

...

and for grid system i use skel
./assets/libs/_skel.scss

@mixin grid($gutters: 40px, $breakpointName: null) {

		// Gutters.
			@include grid-gutters($gutters);
			@include grid-gutters($gutters, \32 00\25, 2);
			@include grid-gutters($gutters, \31 50\25, 1.5);
			@include grid-gutters($gutters, \35 0\25, 0.5);
			@include grid-gutters($gutters, \32 5\25, 0.25);

		// Cells.
			$x: '';

			@if $breakpointName {
				$x: '\\28' + $breakpointName + '\\29';
			}

			.\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; }
			.\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; }
			.\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; }
			.\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; }
			.\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; }
			.\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; }
			.\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; }
			.\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; }
			.\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; }
			.\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; }
			.\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; }
			.\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; }

			.\31 2u\24#{$x} + *,
			.\31 1u\24#{$x} + *,
			.\31 0u\24#{$x} + *,
			.\39 u\24#{$x} + *,
			.\38 u\24#{$x} + *,
			.\37 u\24#{$x} + *,
			.\36 u\24#{$x} + *,
			.\35 u\24#{$x} + *,
			.\34 u\24#{$x} + *,
			.\33 u\24#{$x} + *,
			.\32 u\24#{$x} + *,
			.\31 u\24#{$x} + * {
				clear: left;
			}

			.\-11u#{$x} { margin-left: 91.6666666667% }
			.\-10u#{$x} { margin-left: 83.3333333333% }
			.\-9u#{$x} { margin-left: 75% }
			.\-8u#{$x} { margin-left: 66.6666666667% }
			.\-7u#{$x} { margin-left: 58.3333333333% }
			.\-6u#{$x} { margin-left: 50% }
			.\-5u#{$x} { margin-left: 41.6666666667% }
			.\-4u#{$x} { margin-left: 33.3333333333% }
			.\-3u#{$x} { margin-left: 25% }
			.\-2u#{$x} { margin-left: 16.6666666667% }
			.\-1u#{$x} { margin-left: 8.3333333333% }

	}

and when I use this grid className which is number or letter no issue for example 6u

./components/sections/About.jsx

import React from 'react'

const About = (props) => {
    return (
        <section id="About">
            <div className="inner">
                <div className="6u">  {/* this one is works */}
                    <span dangerouslySetInnerHTML={{__html:props.body}}></span>
                </div>

                <div className="6u -4u">  {/* '6u' is working but not '-4u' */}
                    <span dangerouslySetInnerHTML={{__html:props.body}}></span>
                </div>

                {/* so i modified _skell.scss check next code */}
                
                <div className="6u off4u">  {/* now '6u' and 'off4u' is both working  */}
                    <span dangerouslySetInnerHTML={{__html:props.body}}></span>
                </div>
                
                <div className="12u$(small)">  {/* this doesn't work */}
                    {
                        (props.pic) ? 
                        <span className="image fit"><img src={`${props.pic}`} alt="" /></span>:
                        null
                    }
                </div>
            </div>
        </section>
    );
}

export default About

the modification i did was.

...
                        .\off11u#{$x} { margin-left: 91.6666666667% }
			.\off10u#{$x} { margin-left: 83.3333333333% }
			.\off9u#{$x} { margin-left: 75% }
			.\off8u#{$x} { margin-left: 66.6666666667% }
			.\off7u#{$x} { margin-left: 58.3333333333% }
			.\off6u#{$x} { margin-left: 50% }
			.\off5u#{$x} { margin-left: 41.6666666667% }
			.\off4u#{$x} { margin-left: 33.3333333333% }
			.\off3u#{$x} { margin-left: 25% }
			.\off2u#{$x} { margin-left: 16.6666666667% }
			.\off1u#{$x} { margin-left: 8.3333333333% }
...

so here somewhere has some issue. but i'm not sure is fault off gatsbys scss compiler or jsx babel's ..

any type of guidence will be great
gatsby version 0.12.12
and i havent touch webpack modules..
@KyleAMathews
Copy link
Contributor

Hi could you create a repo with a simple gatsby site reproducing this
problem on the latest gatsby? That'd streamline figuring out what's going
on.

Also when you say there's a bug and it doesn't work -- what exactly is
happening? Is there errors printed to the console? Is any CSS outputted?
What does that look like? Have you used this library previously with
webpack? If so could you compare the webpack config you used there with
gatsby's.
On Sun, Nov 6, 2016 at 12:44 AM Necmettin Karakaya [email protected]
wrote:

Currently I'm developing a website for Restaurant.
for style my components i use one centralize SCSS
./assets/main.scss

...

@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/skel';

@include skel-breakpoints((
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)',
xxsmall: '(max-width: 360px)'
));

@include skel-layout((
reset: 'full',
boxModel: 'border',
grid: ( gutters: 2em ),
breakpoints: (
large: (
grid: ( gutters: 1.5em )
),
small: (
grid: ( gutters: 1.25em )
)
)
));

@mixin inner {
> .inner {
@include padding(4em, 0);
margin: 0 auto;
max-width: _size(inner);
width: calc(100% - 6em);

      @include breakpoint(small) {
          @include padding(3em, 0);
          width: calc(100% - 3em);
      }
  }

}

...

and for grid system i use skel http://skel.io
./assets/libs/_skel.scss

@mixin grid($gutters: 40px, $breakpointName: null) {

  // Gutters.
      @include grid-gutters($gutters);
      @include grid-gutters($gutters, \32 00\25, 2);
      @include grid-gutters($gutters, \31 50\25, 1.5);
      @include grid-gutters($gutters, \35 0\25, 0.5);
      @include grid-gutters($gutters, \32 5\25, 0.25);

  // Cells.
      $x: '';

      @if $breakpointName {
          $x: '\\28' + $breakpointName + '\\29';
      }

      .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; }
      .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; }
      .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; }
      .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; }
      .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; }
      .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; }
      .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; }
      .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; }
      .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; }
      .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; }
      .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; }
      .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; }

      .\31 2u\24#{$x} + *,
      .\31 1u\24#{$x} + *,
      .\31 0u\24#{$x} + *,
      .\39 u\24#{$x} + *,
      .\38 u\24#{$x} + *,
      .\37 u\24#{$x} + *,
      .\36 u\24#{$x} + *,
      .\35 u\24#{$x} + *,
      .\34 u\24#{$x} + *,
      .\33 u\24#{$x} + *,
      .\32 u\24#{$x} + *,
      .\31 u\24#{$x} + * {
          clear: left;
      }

      .\-11u#{$x} { margin-left: 91.6666666667% }
      .\-10u#{$x} { margin-left: 83.3333333333% }
      .\-9u#{$x} { margin-left: 75% }
      .\-8u#{$x} { margin-left: 66.6666666667% }
      .\-7u#{$x} { margin-left: 58.3333333333% }
      .\-6u#{$x} { margin-left: 50% }
      .\-5u#{$x} { margin-left: 41.6666666667% }
      .\-4u#{$x} { margin-left: 33.3333333333% }
      .\-3u#{$x} { margin-left: 25% }
      .\-2u#{$x} { margin-left: 16.6666666667% }
      .\-1u#{$x} { margin-left: 8.3333333333% }

}

and when I use this grid className which is number or letter no issue for
example 6u

./components/sections/About.jsx

import React from 'react'

const About = (props) => {
return (



{/* this one is works */}

            <div className="6u -4u">  {/* '6u' is working but not '-4u' */}
                <span dangerouslySetInnerHTML={{__html:props.body}}></span>
            </div>

            {/* so i modified _skell.scss check next code */}

            <div className="6u off4u">  {/* now '6u' and 'off4u' is both working  */}
                <span dangerouslySetInnerHTML={{__html:props.body}}></span>
            </div>

            <div className="12u$(small)">  {/* this doesn't work */}
                {
                    (props.pic) ?
                    <span className="image fit"><img src={`${props.pic}`} alt="" /></span>:
                    null
                }
            </div>
        </div>
    </section>
);

}

export default About

the modification i did was.

...
.\off11u#{$x} { margin-left: 91.6666666667% }
.\off10u#{$x} { margin-left: 83.3333333333% }
.\off9u#{$x} { margin-left: 75% }
.\off8u#{$x} { margin-left: 66.6666666667% }
.\off7u#{$x} { margin-left: 58.3333333333% }
.\off6u#{$x} { margin-left: 50% }
.\off5u#{$x} { margin-left: 41.6666666667% }
.\off4u#{$x} { margin-left: 33.3333333333% }
.\off3u#{$x} { margin-left: 25% }
.\off2u#{$x} { margin-left: 16.6666666667% }
.\off1u#{$x} { margin-left: 8.3333333333% }
...

so here somewhere has some issue. but i'm not sure is fault off gatsbys
scss compiler or jsx babel's ..

any type of guidence will be great
gatsby version 0.12.12
and i havent touch webpack modules..

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#538, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh4UZODSETz5dOWXwaBDkk_Zs0LKiks5q7YVxgaJpZM4Kqfbj
.

@Necmttn Necmttn closed this as completed Nov 17, 2016
@Necmttn
Copy link
Contributor Author

Necmttn commented Nov 17, 2016 •
edited
Loading

i just started to use inline-styling, which is more capable why to maintain styling in component envirement.

@snyk-bot snyk-bot mentioned this issue Apr 13, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@KyleAMathews @Necmttn