SCSS in the CSS-Only Crossword

HTML & CSS
1

Ok it works now.

Now I want to ask about the CSS vs SCSS. Are the properties in the codepen css or scss? I wonder if the syntax($,/,%) is germaine to scss and is not pure css.Can you convert scss to pure css properies?

Can you explain the grid template repeat property, how do you get these values and is this pure css? Do these values(of the grid template repeat property) change for each puzzle or stay the same?

Other examples with syntax($,/,%): $color-valid-item,all properties with $ sign in front, % sign and / in grid-template repeat and the (crossword -item-size * crossword-column/row-count), does this remain the same?

I guess Im trying to say is this pure css or scss syntax and would it be better to use css syntax?

2

I wasnā€™t the person that made the SCSS code in the CSS-Only Crossword. The people in the HTML+CSS area can explain about SCSS far better than me.

In fact, Iā€™ll help out and move these posts over there.

Edit:

The code is at https://codepen.io/adrianroworth/pen/OpeyZq

3

I know nothing about SCSS, but in CodePen, you an view the compiled CSS by selecting the SCSS/CSS dropdown and choosing View Compiled CSS.

4

What room covers the topic, converting scss to css. The codepen says css but some of the syntax is scss.

5

For reference, a link to the CSS-Only Crossword code is https://codepen.io/adrianroworth/pen/OpeyZq

6

I was just looking on internet, it seem scss properties will work with this code. Do you think it will work?

8

You can only use SCSS if you have set up your environment to use it as SCSS is a preprocessor and the SCSS is then compiled into normal CSS. Browsers donā€™t understand SCSS at all.

If you look at the codepen and then choose ā€˜View compiled CSSā€™ you will see the real CSS that the browser will use. SCSS allows you to do things that CSS canā€™t such as looping through code and applying incremental variables when you have repetitive constructs such as those used in the crossword example.

Personally I donā€™t use a preprocessor as I rarely see a benefit (unless creating a convoluted demo) but a lot of users will swear by it. In the end I hate anything getting between me and my CSS.

6 Likes
9

As Paul said, itā€™s basically preference how you code. Some people find it faster/better :slight_smile: . There are definitely advantages and disadvantages to it. If itā€™s something you have set up already, and thereā€™s no real ā€œsetupā€ work you need to make SCSS work, then I say go for that, but it just compiles into CSS so itā€™s not the end of the world to just code in straight CSS.

I was against SCSS but these past few years have changed my view on it. Since itā€™s set up on my machine and I know how to easily use/compile the code, itā€™s been great. But I could see how for someone, with a small project, who doesnā€™t have it set upā€¦it might be too much, or not worth it, to go through with using SCSS.

3 Likes
10

A post was split to a new topic: How to make a new crossword from the CSS-Only Crossword

11

$color-focus-item: FFF74 is the declared variable

When you want to use later in the code as a background, what is the proper syntax

background: #FFF74 or $color-focus-item;

12

You can use either, but the variable name is the preferred one to use as that makes later modifications easier to achieve.

1 Like
13

I think I messed up. I lost the active focus box, the one that moves when you enter a letter. I used the following code and the yellow active square is not there. Can you help?

&:active,
&:focus {
background: #FFF74;
border: 1px solid #000000;
outline: 1px solid #000000;focus
}

14

think I messed up. I lost the active yellow focus square. When I click a square the background isnā€™t yellow,however the cursor will move with the arrow. :grinning: How can I get the active square back to yellow?

Also the clues hover yellow; they do not turn green when right, but the answer on the grid does.

15

Fortunately you have the codePen that gives you the original CSS code. You can use that to undo the damage you have done.

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.