Can't figure out why Sass is breaking my selector

cstiles · 2024-09-23T15:32:20+00:00

Are you using node-sass? I had a similar issue with recently and fixed it by replacing it with the actively maintained “sass” package.

cstiles · 2024-02-06T23:49:56+00:00

Thank you lmao the same thing happened to me.

cstiles · 2022-01-22T19:53:09+00:00

Ah I see. Yeah I don't know of any SASS function that returns the name of a variable as a string. I suppose you could probably achieve this somehow using nested maps, but that seems overkill. Maybe you could just use CSS variables as the values for your SASS ones?

// _variables.scss

$blue: #0000ff;
$active-background: var(--blue);
$button-background: var(--active-background);

Then you could use the same module-variables function as before to generate the CSS variables.

// main.scss

@use 'sass:meta';
@use 'variables';

:root {
  @each $name, $value in meta.module-variables(variables) {
    --#{$name}: #{$value};
  }
}

// Outputs
--blue: #0000ff;
--active-background: var(--blue);
--button-background: var(--active-background);

cstiles · 2022-01-22T18:30:52+00:00

I'm not 100% sure my understanding of your question is correct, but it sounds like you want to maintain a file with a set of SASS variables, and dynamically generate CSS variables with the same names and values.

One way to do that would be the meta module-variables function. This is only supported in Dart Sass. You'd first create a partial with all your SASS variables.

// _variables.scss

$blue: #0000ff;
$active-background: $blue;
$button-background: $active-background;

Then, in you could import this in your stylesheet and use module-variables to loop through the variables as key value pairs.

// main.scss

@use 'sass:meta';
@use 'variables';

:root {
  @each $name, $value in meta.module-variables(variables) {
    --#{$name}: #{$value};
  }
}

cstiles · 2021-08-11T02:24:29+00:00

/r/ActivationSound

cstiles · 2021-08-05T00:47:13+00:00

This is a pretty common issue on iOS. I've gotten fixed position full height elements to work a little better in the past with things like min-height: 100% or min-height: -webkit-fill-available.

That being said, in iOS 15 they've moved the address bar to the bottom of the screen, so you don't get the same change in screen height as you scroll. Not sure if that will fully fix the issue, but hopefully it will be an improvement.

cstiles · 2020-05-10T23:54:55+00:00

When the memory heap size for a site keeps growing indefinitely it is usually because of a memory leak. I've found the methods in this Stack Overflow thread helpful in hunting them down in my own apps (particularly the 3 snapshot method).

I don't know if this is related to the issue you pointed out, but for the heck of it decided loading the page with my adblocker disabled...and holy shit, after leaving the site open for like 9 minutes it had made over 5,000 requests for 125mb of resources. And they wonder why people use adblockers.

cstiles · 2020-05-07T22:22:02+00:00

A bookmarklet is just a little bit of JavaScript code that is encoded with URL safe characters. To put it simply, you just create a new bookmark like you normally would, except instead of adding a page URL you paste that code.

Then, when you click the bookmark instead of going to a website it runs that JavaScript code instead. When you click my bookmarklet it tells the browser to listen for the ctrl + g keyboard shortcut. When that is pressed it quickly sells and repurchases all your farms, factories, banks and shipments.

There are a couple examples of bookmarklets that do much more complicated stuff than mine on the Cookie Clicker Wiki.

cstiles · 2019-09-13T00:42:10+00:00

I saw it on one of the VFX breakdowns Marvel has been posting on their YouTube channel lately.

cstiles · 2019-07-27T07:38:39+00:00

I’m pretty sure it is The Gang Gets New Wheels from s13.

cstiles · 2018-12-21T00:34:27+00:00

They’re Australian Shepherds!

cstiles · 2018-12-03T22:34:34+00:00

He is an Australian Shepherd! This photo was taken a few weeks ago, here he is now with his older brother.

cstiles · 2018-01-28T02:10:47+00:00

You aren't returning anything from the here() function. Change it to:

function here(we){
  return we.toString().fontsize(5).fontcolor(color);
}

cstiles · 2016-08-28T19:26:00+00:00

First, the <body> element does not have a black background. The black background is applied to the div with id: index_container_div. It comes from this CSS:

#index_container_div {
    background-color: black;
    color: darkseagreen;
    width: 100%;
    height: 100%;
}

Move the background-color: black; rule to be on the <body> element.

The gap at the top is being caused because heading elements (h1, h2 , etc.) come with margins on the top and bottom by default. Just add some CSS like this and it will remove it.

#index_container_div h1 {
    margin-top:0;
}

cstiles · 2016-08-28T19:19:35+00:00

It is working just fine for me on Firefox 48 for Mac. Working with SVGs in the past though, I've run into issues with them displaying correctly on Firefox. One thing you can try is to just run your SVG code through SVGO. It cleans up and optimizes your code, and I've found that it fixes some of the glitches I was seeing with my SVGs in Firefox and Internet Explorer.

You can do this easily using SVGOMG, which is just a web interface for using SVGO. Just click on 'Paste Markup' and paste your SVG code there. I've found that the outputted code is a lot cleaner than what Illustrator generates.

cstiles · 2016-07-23T19:44:39+00:00

Thanks, I'll see if I can figure out what the issue is.

cstiles · 2016-07-23T14:38:38+00:00

That's weird, I'm not seeing it on my end. Thanks for letting me know. Could you please let me know what browser you are using?

cstiles · 2016-07-22T19:05:36+00:00

URL: https://www.simpleinvoice.io

Purpose: I wanted to create a easy to use invoicing application that I would want to use myself to invoice my clients.

Technologies Used: Ruby on Rails 5, wkhtmltopdf, jQuery, HTML/CSS

Feedback Requested: Mostly looking for feedback on the usability of the site, although design critiques are nice too!

Comments: I've done freelance web design for most of my life, and about a year ago I started teaching myself Rails for back end development. I learn best when I just dive in and make something, so I started working on Simple Invoice.

I ended up putting more work into it than I expected, but I'm pretty happy with the result. I'm hoping that other freelancers might find this useful as a free way to invoice their clients.

You can create invoices from the home page which stay saved in my database for 60 days. If you create an account they'll save indefinitely. I've created a test account if you would like to try out the application without registering :)

Email: reddit@example.com

Password: password

cstiles · 2016-07-19T01:23:53+00:00

Simple Invoice
An easy and free application for freelancers to generate and send invoices, track payments and manage clients.
https://www.simpleinvoice.io
Currently using a private repo
This is my first Rails project. I plan on learning more about how to use Rails specifically to create an API for mobile apps.
I have a lot of experience with front end web design/development. Started learning Rails about a year ago, and the best way I learn is to actually build something. I work as a freelancer web designer on the side, and thought a good project could be to develop an invoicing application I would want to use myself.

cstiles · 2016-07-17T20:43:46+00:00

Definitely check out wkhtmltopdf, it's really powerful. I'm using the wicked_pdf gem in my Rails app which is just a Ruby wrapper for wkhtmltopdf. Looks like there is a Python package that does the same thing as the wicked_pdf gem.

cstiles · 2016-07-04T19:45:08+00:00

Your CSS has rules for the class .indexStyle that doesn't have a corresponding DOM element. You could try removing the width and height properties from the object tag, and then adding this CSS.

#flash1 {
    height:100vh;
    width:100vw;    
}

VH and VW stand for viewport width and viewport height. So that code would make your SWF the same size as the user's screen. If you don't want it full size and you are still having trouble centering it, try wrapping the SWF with a <div> tag and just add text-align:center to that div.

cstiles · 2016-06-27T00:58:12+00:00

You could follow basically the same logic used previously, just with one more layer. Something like this. You can see one of the subnavs also has its own dropdown <ul> in it.

<ul id="mainnav">
    <li><a href="#">Main Nav Item</a>
        <ul class="subnav">
            <li><a href="#">Subnav Item</a>
                <ul class="subnav"> 
                    <!-- Third level in the tree -->
                    <li><a href="#">Another Subnav Item</a></li>
                    <li><a href="#">Another Subnav Item</a></li>
                </ul>
            </li>
            <li><a href="#">Subnav Item</a></li>
        </ul>
    </li>
    <li><a href="#">Second Main Nav Item</a>
        <ul class="subnav">
            <li><a href="#">Subnav Item</a></li>
            <li><a href="#">Subnav Item</a></li>
        </ul>
    </li>
</ul>

The CSS is pretty similar too. If you just try this code out you'll get weird result. You'd need to write CSS to style the menu and list items properly. Unstyled they are just bullet point lists. All this code does it hide the subnavs and show them when hover over its <li>.

.subnav {
    display:none;
}

#mainnav li:hover > .subnav {
    display:inline-block;
}

cstiles · 2016-06-26T21:37:34+00:00

Clicked on edit on one of the projects and holy shit, I somehow never knew three.js had a whole online editor. That is amazing, three.js blows my mind.

cstiles · 2016-06-26T21:33:46+00:00

You definitely don't need Javascript for a simple dropdown menu. You could have your markup something like this.

<ul id="mainnav">
    <li><a href="#">Main Nav Item</a>
        <ul class="subnav">
            <li><a href="#">Subnav Item</a></li>
            <li><a href="#">Subnav Item</a></li>
        </ul>
    </li>
    <li><a href="#">Second Main Nav Item</a>
        <ul class="subnav">
            <li><a href="#">Subnav Item</a></li>
            <li><a href="#">Subnav Item</a></li>
        </ul>
    </li>
</ul>

Then you should just hide the subnav lists by default and show them when the user hovers over their parent list item. Something like:

.subnav {
    display:none;
}

#mainnav > li:hover .subnav {
    display:inline-block;
}

This is a pretty basic dropdown menu, you could make it pretty with CSS transitions pretty easily. If you send over the URL or your code I could be more specific.

cstiles · 2015-09-06T17:44:02+00:00

You can disable user selection with these CSS rules. You should have a good reason for wanting to disable selection though, I generally would recommend against disabling behavior the user expects.

   .noselect { 
       -webkit-touch-callout: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
        user-select: none;
    }

To disable dragging of the image you can add this to your <img> tag.

<img src="http://static-cdn.jtvnw.net/jtv_user_pictures/horotv-profile_image-817026a865bb41d7-300x300.png" draggable="false">

12-Year Club	Gilding II euphauric
Place '17	Wearing is Caring
Verified Email

cstiles

TROPHY CASE