Legend

Question

Feedback concerning Sass series

Forum|Forum|7 years ago
March 19, 2018
3 replies
2440 views

hello OS

I don't know if you have time ... but if so, I will be interested to get some feedback concerning this Sass series... Understanding and using Sass – Puce et Média please don't stop at the first two articles which only present certain bases and approaches ...

This topic has been closed for replies.

pziecina

Legend

O/K, I know that my following comment will upset a few people, but having read -

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions

The only item that may be usefull and that I cannot find another way of using, be that normal css, linting or other, is the 'if' statement. The question is though, in an age in which IE9 and below is becomming less and less relevant, (not to mention dangerous to use over an open web connection) do I actually require it anymore.

Sorry everyone, but the more I read up on using sass again, the less reasons I find to do so. Five or ten years ago I would have embraced it with open arms publicly, (i did so privately for a couple of years) but now, no thank you.

Edit: If sass is to be promoted now, then I and anyone else who is more than a casual coder or someone following trends, require better reasons than any given, sorry Birnou, but most of the articles give project management reasons, without the 'why', and without investigating other avenues.

BenPleysier

Community Expert

You have forgotten to say that CSS variables can only be used as the value part of of an element's property, see CSS Custom Properties for Cascading Variables Module Level 1

How would I go if I wanted to use a variable in a media query like

@media (max-width: var(--mobile-breakpoint)) {
}

There is no reason why CSS variables cannot be used in Sass or LESS. In fact, it is a great addition.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Community Expert

I have found the answer to my question, use Sass combined with CSS variables as in

// For static vars use Sass
$breakpoint-small: 450px;
$breakpoint-med: 900px;
$inverse-background: #222;
$inverse-text: #F0F0F0;
// For dynamically scoped vars use CSS Custom Props
:root {
--container-display: block;
--card-figure-display: none;
--title-font-size: 1.2rem;
--card-background: #F0F0F0;
}
// CSS variables do not work in media query conditions
// this is why we use sass variables
@media screen and (min-width: $breakpoint-small) {
:root {
--card-figure-display: inline-block;
--title-font-size: 1.75rem;
}
}
@media screen and (min-width: $breakpoint-med) {
:root {
--container-display: flex;
--title-font-size: 2rem;
}
}
// Dynamically scoped can include elements
.card-a, .card-c {
--card-background: $inverse-background;
--card-text-color: $inverse-text;
}
// or elements within media queries
@media screen and (min-width: $breakpoint-med) {
.card-c {
// I can force these variables to inherit from the :root
--card-background: inherit;
--card-text-color: inherit;
}
.card-a, .card-d {
--card-background: #222;
--card-text-color: #FAFAFA;
}
}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

pziecina

Legend

Now my previous post has touched on a couple of basic points regarding the rwd philosophy, without getting into the subject of srcset etc, (please lets not go there, everyone). I would like to come to feedback on -

http://www.puce-et-media.com/en/deploy-sass-effectively/

Much of what is written, has been around, (even in web development) for a number of years, and is not necessarily related to sass or any other pre/post-processor. What it does relate to is development management ideas and procedures. Most of which are at least used in some part by many developers in the organisation of files and development strategies.

As an example, I think most developers have at some point in their lives as developers heard of and/or worked with the idea of splitting the development into modules, be that css, js, php or whatever, as an example, (using css) one would develop -

layout.css

style.css

type.css

color.css

and not just one css file for everything.

Then either import the file(s) into the master, or link to each file in the head element.

Now to the suggestion Birnou.

I think it would be an idea if you could give reasons why sass would improve the use of the various development ideas, as an example the ITCSS section, (typical example) describes an idea of organisation that many use without sass, (often without even knowing they are anymore) but does not say if or why the use of sass helps in the organisation of development. Plus how does sass help in the managment of the project when it is possible to apply the solutions in a general sense, and achive the same end result with possibly less problems.

Note - The above comment applys to all the items mentioned in that article.

B i r n o uAuthor

Legend

I do not think I wrote that sass brought a new approach to object management, or modularization of writing, CSS ... OOCSS, BEM, ITCSS, SMACSS, Atomic Design ... exists outside of Sass

I'm just saying that Sass makes it easy to use and integrate

Concerning the philosophy, and the principle, of ITCSS, it is not only a stack of different CSS sheets splitting tasks, but an inverted pyramid that attributes a strong specificity of overwriting

personally I use a slightly different approach than ITCSS, which I describe later in the series, there is an example of use, and I provide the source files (github) that can be adapted to the needs of each ... do not have not you seen ...?

pziecina

Legend

Hi Birnou,

I clicked on the link at the bottom of the page, which took me to another series of articles by mistake, (honestly I can read). Which is how I ended up thinking the series on rwd and content was part of the article.

Now for what I mean by the 'how' and 'why'.

When I read 'deploy sass effectively', you list the idea behind each 'organisation' idea, but without any conclussion(s). By that as example lets take OOCSS and ITCSS, the way I read both your and other articles on both subjects, illustrated for me that oocss was in the principles given behind the idea, and the way the idea is presented, aimed more in the direction of programmers working together when it comes to actual use. For ITCSS I found that the idea behind that was aimed more at a project managment idea, in which there is a more clearly defined line between each of the principles behind the idea.

Whilst all can to some extent be used within each other, the article, (for me) would benefit from an indication of the type of use, (and user) each is most suited for, with possibly a couple of sass examples expanding on how sass would be used in each case, say -

oocss being aimed more at programmers would benefit from examples to give an understanding of how oo programming ideas can be used in sass.

with itcss, because this is more suited for those using a more clear delineation of areas, examples of using sass to bring each area of responsibilities code together, (or how it would be used in a modular approach).

Trying to get someone like me who has used sass in the past, then moved to postcss but dropped that also, will always be much more difficult than convincing a new developer. Which is why I say that at the end of each part of the article I am looking for the 'why' I should use sass argument, even if I don't agree with the reasons given I am much more likely to understand 'why' someone is saying "use sass".

O

osgood_

Legend

https://forums.adobe.com/people/B+i+r+n+o+u wrote
hello OS
I don't know if you have time ... but if so, I will be interested to get some feedback concerning this Sass series... Understanding and using Sass – Puce et Média please don't stop at the first two articles which only present certain bases and approaches ...

What kind of feedback do you require?

I can only say its not a workflow that I would want to use simply because of the reasons I've already stated. I don't believe in using workflows where the final output file is dependent on another file which is independent of the final file put to the server.

Yes, it can be viewed as helpful by some web-developers during a build process, while they are in complete control of the files, but they are being short-sighted as anything can happen in the future.

Its like the recent case of KFC in the UK who decided to go to another supplier for their delivery distribution, it all went t*ts up very quickly and KFC immediately came back to its original supplier. If your website files get into other developers hands they can practically do anything with them in a short space of time. If your client then comes back to you your original workflow may no longer be usable, depending on the extent of the changes made whilst away from your guardianship.

B i r n o uAuthor

Legend

in fact I had posted my comment following your previous remark, I quote ...

"... Less and sass do not improve your css writing. Infact its a lazy approach riddled with a very major fault...."

I think that in the opposite (at least Sass, because I don't use Less), improve, and eeply improve My css writing... and it's not at all a lazy approach... and I don't ound (yet) a major fault in it... so as described in the series... I try to demonstate on what and how it can opens doors... so that is where I was expecting feedback... again, ... just if you have time....

O

osgood_

Legend

https://forums.adobe.com/people/B+i+r+n+o+u wrote
in fact I had posted my comment following your previous remark, I quote ...
"... Less and sass do not improve your css writing. Infact its a lazy approach riddled with a very major fault...."

Ok.......... its a short-sighted approach riddled with a very major fault.

I dont really have time to comment on a workflow that I find is a waste of time on a personal level. Once css variables become more widely used and supported then I think we have something major to be 'shouting' about until then pure css it is for me.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded